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


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

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

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

  • 相关阅读:
    hdu 5352 匈牙利(多重匹配)
    hdu 2112 最短路+stl
    hdu 1811 拓扑排序+并查集+细心
    hdu5407 CRB and Candies
    hdu1018 Big Number
    hdu5410 CRB and His Birthday
    hdu1023 Train Problem II
    hdu4812 D Tree
    hdu1085 Holding Bin-Laden Captive!
    hdu4810 Wall Painting
  • 原文地址:https://www.cnblogs.com/cheeseCatMiao/p/7867072.html
Copyright © 2020-2023  润新知