如何在多次触发事件时只执行最后一次?(函数防抖)

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

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

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

原文地址:https://www.cnblogs.com/cheeseCatMiao/p/7867072.html