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

  • 相关阅读:
    Two Sum II
    Subarray Sum
    Intersection of Two Arrays
    Reorder List
    Convert Sorted List to Binary Search Tree
    Remove Duplicates from Sorted List II
    Partition List
    Linked List Cycle II
    Sort List
    struts2结果跳转和参数获取
  • 原文地址:https://www.cnblogs.com/cheeseCatMiao/p/7867072.html
Copyright © 2011-2022 走看看