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

  • 相关阅读:
    文件下载与中文文件名乱码问题解决
    文件字符编码的转换
    HTML速记
    MySQL学习笔记——安装
    C#防止重复弹出多个窗体
    ASP.NET Gridview中自带的日期格式设置功能
    [转]MSDTC on server '''' is unavailable. 的解决办法
    [转]关于SQL中Between语句查询日期的问题
    [转]SQL触发器实例讲解
    SQL索引技巧_1
  • 原文地址:https://www.cnblogs.com/cheeseCatMiao/p/7867072.html
Copyright © 2011-2022 走看看