應用情景

經(jīng)典使用情景：js的一些事件，比如：onresize、scroll、mousemove、mousehover等；

還比如：手抖、手誤、服務器沒有響應之前的重復點擊；

這些都是沒有意義的，重復的無效的操作，設置對整個系統(tǒng)的影響還可能是致命的，所以我們要對重復點擊的事件進行相應的處理！

?

節(jié)流函數(shù)

所謂的節(jié)流函數(shù)顧名思義，就是某個時刻限制函數(shù)的重復調(diào)用。

同樣節(jié)流函數(shù)也是為了解決函數(shù)重復提交的問題，而防止重復提交的方法，不止節(jié)流函數(shù)一種實現(xiàn)。

?

方法匯總

本文整理了我在工作實踐當中，覺的防止js重復提交，比較好用的方法，在這里和大家分享一下。

一、setTimeout + clearTimeout（節(jié)流函數(shù)）

　　本文提供兩種實現(xiàn)方式：普通節(jié)流函數(shù)和閉包節(jié)流函數(shù)

二、設定flag/js加鎖

三、通過disable

四、添加浮層比如loading圖層防止多次點擊

?

具體實現(xiàn)

一、setTimeout + clearTimeout（節(jié)流函數(shù)）

方式一：閉包節(jié)流函數(shù)（可傳遞多個參數(shù)）

/*** 閉包節(jié)流函數(shù)方法（可傳參數(shù)）* @param Function fn 延時調(diào)用函數(shù)* @param Number delay 延遲多長時間* @return Function 延遲執(zhí)行的方法*/ var throttle = function (fn, delay) {var timer = null;return function () {var args = arguments; //參數(shù)集合 clearTimeout(timer);timer = setTimeout(function () {fn.apply(this, args);}, delay);} }/*** 要執(zhí)行的方法* @param String name 傳遞的參數(shù)*/ function postFun(name) {document.writeln("名字：" + name); }//================測試部分 => 【1s重復點擊10次】 var t = throttle(postFun, 1000); var ejector = setInterval(() => {t("tiger"); }, 100);setTimeout(() => {clearInterval(ejector); }, 1000);

執(zhí)行結果：

方式二：普通節(jié)流函數(shù)方法

/*** 普通節(jié)流函數(shù)方法* @param Function fn 延時調(diào)用函數(shù)* @param Number delay 延遲多長時間*/ function throttle(fn, delay) {if (fn._id) {clearTimeout(fn._id);}fn._id = window.setTimeout(() => {fn();fn._id = null;}, delay); }/*** 要執(zhí)行的方法*/ function postFun() {document.writeln(new Date().getTime()); }//================測試部分 => 【1s重復點擊10次】 var interval = setInterval(() => {throttle(postFun, 1000); }, 100);setTimeout(() => {clearInterval(interval); }, 1000);

執(zhí)行結果：

二、設定flag/js加鎖

var lock = false; jQuery("#submit").on('click', function () {if (lock) {return false;}jQuery.post(url, data, function (response) {//TODO:業(yè)務代碼lock = false;}); });

?

總結

前兩種方式實現(xiàn)起來比較方便，而后兩種實現(xiàn)起來相對比較繁瑣，如果是為了防止事件的多次觸發(fā)，建議使用閉包，如果是表單提交，適度使用后兩種比較穩(wěn)妥。

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的js节流函数和js防止重复提交的N种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。