zoukankan      html  css  js  c++  java
  • 如何实现防抖和节流

    防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。

    防抖:​触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

    解决方法:每次触发事件时都取消之前的延时调用方法

    
    
    function delayFun(fn) {
          let timeout = null; // 创建一个标记用来存放定时器的返回值
          return function () {
            clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
            timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
              fn.apply(this, arguments);
            }, 500);
          };
    }
    function sayHi() {
          console.log('防抖成功');
     }
    
    var box= document.getElementById('inp');
    box.addEventListener('input',delayFun(sayHi)); // 防抖

    节流:

    高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

    解决方法:每次触发事件时都判断当前是否有等待执行的延时函数

    function flowFun(fn) {
          let canRun = true; // 通过闭包保存一个标记
          return function () {
            if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return
            canRun = false; // 立即设置为false
            setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
              fn.apply(this, arguments);
              // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉
              canRun = true;
            }, 500);
          };
     }
     function sayHi(e) {
          console.log(e.target.innerWidth, e.target.innerHeight);
     }
     window.addEventListener('resize',flowFun(sayHi));
     

    PS:防抖和节流的作用都是防止函数多次调用。区别在于,假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖的情况下只会调用一次,而节流的 情况会每隔一定时间(参数wait)调用函数。

    欢迎关注我的公众号,希望可以与大家一起学习一起进步

    参考文章:1、GitHub每日一道面试题

         2、interviewMap之JS

  • 相关阅读:
    <<软技能,代码之外的生存技能>>读书笔记
    Pma模块详解,对用户登录linux等进行限制,密码修改限制等
    numpy pandas matplotlib
    numpy安装包scipy
    linux python 安装 nose lapack atlas numpy scipy
    kafka搭建
    实例化Bean的方法(基于xml配置)-http://blog.csdn.net/shymi1991/article/details/48153293
    转-Vue.js2.0从入门到放弃---入门实例(一)
    form表单传递对象数组
    使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
  • 原文地址:https://www.cnblogs.com/lxl0419/p/10951263.html
Copyright © 2011-2022 走看看