zoukankan      html  css  js  c++  java
  • 如何在多次触发事件时只执行最后一次?(函数防抖)

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

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

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

  • 相关阅读:
    半平面交模板
    poj2420(模拟退火大法好)
    hdu4266(三维凸包模板题)
    三维凸包模板
    三维空间直线最近点对hdu4741
    3维计算几何模板
    hdu1174(3维射线与圆是否相交)
    重点记忆
    UNICODE,GBK,UTF-8区别
    AJAX 基础
  • 原文地址:https://www.cnblogs.com/cheeseCatMiao/p/7867072.html
Copyright © 2011-2022 走看看