js 防多次点击插件

防止在同一时间段多次重复点击按钮

(function ($) {
	$.fn.SubmitWithLock = function ($opts) {
		lockLoad($(this), $opts)
	}
	var lockLoad = function ($dom, $opts) {
		let defalutOpts = {
			lockTime: 3000,//锁定时间
			once: false, //仅执行一次
			originText: "", //提交前显示的文字 
			triggerEvent: "click", //提交触发事件
			submitText: "正在提交中..." //提交中显示文字
		};
		let opts = lockLoadOpts($opts);
		getSubmitText();
		lockLoadEvent();
		function lockLoadEvent() {
			$dom.off(opts.triggerEvent);
			$dom.on(opts.triggerEvent, function (e) {
				submitLoad(e);
			});
		}
		function submitLoad(e) {
			e.stopPropagation();
			if (opts.submitNum > 0) return true;
			setSubmitText(opts.submitText);
			++opts.submitNum;
			opts.unLock = opts.callback && opts.callback();
			unLock(opts);
		}
		function setSubmitText($val) {
			isFormElement($dom[0]) ? $dom.val($val) : $dom.html($val);
		}
		function getSubmitText() {
			opts.originText = opts.originText+"" !== "" ? opts.originText :(isFormElement($dom[0]) ? $dom.val() : $dom.text());
		}
		function isFormElement(obj) {
			return !!(obj.tagName && obj.tagName !== "BUTTON" && "name" in obj && "form" in obj);
		}
		function lockLoadOpts(_opts) {
			let opts = _opts || {};
			opts.submitNum = 0; //提交次数
			opts = $.extend(defalutOpts, opts);
			return opts;
		}
		function unLock() {
			if (typeof opts.unLock === "boolean") {
				if (opts.unLock) {
					resertLock();
				}
				return true;
			}
			if (opts.once) { setSubmitText(opts.originText); return true; }
			setTimeout(function () {
				resertLock();
			}, opts.lockTime);
			function resertLock() {
				opts.submitNum = 0;
				setSubmitText(opts.originText);
			}
		}
	}
})(jQuery)

调用方式

$(dom).SubmitWithLock({
      callback:function(){
      }
})

• 有好的想法,欢迎在评论留言