函式節流和函式防抖

函式節流的關鍵：宣告乙個變數當標誌位，記錄當前**是否在執行。

如果空閒，則可以正常觸發方法執行。

如果**正在執行，則取消這次方法執行，直接return。 

這個方法的作用是監聽id為throttle元素的滾動事件。

當canrun為true，則代表現在的滾動處理事件是空閒的，可以使用。

通過關卡if(!canrun)，等於就拿到了通行證。然後下一步的操作就是立馬將關卡關上canrun=false。這樣，其他請求執行滾動事件的方法，就被擋回去了。

接著用settimeout規定最小的時間間隔300，接著再執行settimeout方法體裡面的內容。

最後，等settimeout裡面的方法都執行完畢，才釋放關卡canrun=true，允許下乙個訪問者進來。

函式防抖的要點，也是需要乙個settimeout來輔助實現。延遲執行需要跑的**。

如果方法多次觸發，則把上次記錄的延遲執行**用cleartimeout清掉，重新開始。

如果計時完畢，沒有方法進來訪問觸發，則執行**

這個方法的作用是監聽id為debounce元素的滾動事件

進入滾動事件方法體的時候，做的第一件事就是清除上次未執行的settimeout。而settimeout的引用id由變數timer記錄。

cleartimeout方法，允許傳入無效的值。所以這裡直接執行cleartimeout即可。

然後，將需要執行的**放入settimeout中，再返回settimeout引用給timer快取。

如果倒計時300ms以後，還沒有新的方法觸發滾動事件，則執行settimeout中的**。

其實，用佇列的方式也可以做到這種效果。這裡就不深入了。 

函式節流應用的實際場景，多數在監聽頁面元素滾動事件的時候會用到。因為滾動事件，是乙個高頻觸發的事件。

函式防抖的應用場景，最常見的就是使用者註冊時候的手機號碼驗證和郵箱驗證了。只有等使用者輸入完畢後，前端才需要檢查格式是否正確，如果不正確，再彈出提示語

但是，仔細想想，上面的實現方式還是有一定的缺點。如果頁面很長，我們一直在滾動頁面，那_log方法就一直不會被執行。所以我們可以公升級一下函式防抖方法。

每一次的使用者輸入都觸發郵箱格式檢測事件，造成了浪費，於是設定兩次輸入之間的時間間隔大於800ms時（使用者結束輸入時），再執行檢查郵箱格式。

const filter=  = /^([a-za-z0-9_\.\-])+\@(([a-za-z0-9\-])+\.)+([a-za-z0-9])+$/; 

$("#email").on("keyup",checkemail()); 
function checkemail(),800); } }

閱讀原文二：

函式防抖和函式節流

1 函式防抖 函式防抖是指頻繁觸發的情況下，只有足夠的時間，才執行 一次，函式防防抖的要點也是要乙個settimeout來輔助實現，延遲執行需要跑的 如果方法多次觸發，則把上次記錄的延遲執行 用cleartimeout清理掉，重新開始。如果計時完畢，沒有方法來訪問觸發。則執行 函式防抖的應用場景，最...

函式防抖和函式節流

首先分別用一句話區分函式防抖和節流的區別。函式防抖就是在使用者停下相應動作，並在給定時間過去之後僅被呼叫一次。函式節流是使用者在執行相應動作時，每隔一段時間發一次請求。針對一些頻繁觸發的事件如scroll keyup resize，如果正常繫結事件的話，可能在很短的時間內連續觸發事件，十分影響效能。...

函式節流和函式防抖

概念 在規定的時間段內 例如1000ms 即使事件觸發了很多次，都只執行一次對應的任務。栗子 在我們進入地鐵站時通過閘機，每隔3秒內只允許乙個人通過，即使多個人同時刷卡，也只允許乙個人通過。運用場景 如果我們在改變瀏覽器的大小或者監聽滑鼠移動事件等事件 短時間內觸發多次 為了節省瀏覽器效能開銷，就可...