如何在多次觸發事件時只執行最后一次？（函數防抖）

如何讓滾輪滑動一次只執行一次事件。

同樣的問題，就是窗口多次調整后只允許觸發一次事件，且延遲一段時間執行，如何解決。

只需要在事件開頭加上clearTimeout即可，每次滑動時都清除排隊執行的前面等候事件，以最后一次添加的事件為主。

var scrollEle = document.getElementById("inner");
var time;
var data;

scrollEle.onmousewheel = function(e) {
　　clearTimeout(time);
　　time = setTimeout(function() {
　　　　if(e.wheelDelta > 0) {
　　　　　　if(scrollEle.scrollTop >= 400) {
　　　　　　　　data = 0;
　　　　　　　　(function move() {
　　　　　　　　　　data++;
　　　　　　　　　　scrollEle.scrollTop-=20;
　　　　　　　　　　if(data < 20) {
　　　　　　　　　　　　setTimeout(move,16);
　　　　　　　　　　}
　　　　　　　　})();
　　　　　　}
　　　　}
　　　　else {
　　　　　　if(scrollEle.scrollTop <= 800) {
　　　　　　　　data = 0;
　　　　　　　　(function move() {
　　　　　　　　　　data++;
　　　　　　　　　　scrollEle.scrollTop+=20;
　　　　　　　　　　if(data < 20) {
　　　　　　　　　　　　setTimeout(move,16);
　　　　　　　　　　}
　　　　　　　　})();
　　　　　　}
　　　　}
　　　　},300);
　　e.preventDefault();
};

 

 

函數防抖：設置定時器監聽事件，在連續觸發事件時會清掉前一次的定時器，重新計算時間間隔以達到只執行最后次觸發的事件的目的（比如說登陸校驗、搜索框輸入關聯查詢）

函數節流：在規定時間內只執行一次事件（比如說滾動事件監聽規定300毫秒才做一次判斷）

 

函數節流與函數防抖的分析： https://juejin.im/entry/58c0379e44d9040068dc952f