如何在多次触发事件时只执行最后一次？（函数防抖）

如何让滚轮滑动一次只执行一次事件。

同样的问题，就是窗口多次调整后只允许触发一次事件，且延迟一段时间执行，如何解决。

只需要在事件开头加上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