美文网首页
防抖和节流

防抖和节流

作者: 风之伤_3eed | 来源:发表于2020-05-09 14:14 被阅读0次

防抖(只执行最后一次):动作停止后的时间超过设定的时间时执行一次函数。注意:这里的动作停止表示你停止了触发这个函数,从这个时间点开始计算,当间隔时间等于你设定时间,才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间,则函数一直不会执行。

function debance(fn, delay) {
  let timer = null;
  return () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}

window.addEventListener(
  "scroll",
  debance(() => {
    console.log(111);
  }, 1000)
);

防抖应用场景:

  1. search搜索联想,用户在不断输入值时,用防抖来节约请求资源
  2. window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

节流(从第一次开始执行单位时间执行):一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

//方法一:设置一个标志
    function throttle(fn, delay) {
      let flag = true;
      return () => {
        if (!flag) return;
        flag = false;
        timer = setTimeout(() => {
          fn();
          flag = true;
        }, delay);
      };
    }
    //方法二:使用时间戳
  function throttle(fn, delay) {
      let startTime=new Date()
      return () => {
        let endTime=new Date()
        if (endTime-startTime>=delay){
          fn()
          startTime=endTime
        }else{
          return
        }
      };
    }
    window.addEventListener(
      "scroll",
      throttle(() => {
        console.log(111);
      }, 1000)
    );

节流应用场景:

  1. 鼠标不断点击触发,mousedown(单位时间内只触发一次)
  2. 监听滚动事件,比如是否滑到底部自动加载更多(懒加载),用throttle来判断

相关文章

  • 谈谈js中的节流和防抖函数

    关于节流和防抖,这篇文章说的很好了,深入lodash源码分析防抖和节流深入篇 | Lodash 防抖和节流是怎么实...

  • JavaScript防抖和节流

    1. 认识防抖和节流 1.1. 对防抖和节流的认识 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电...

  • 前端性能优化-浅谈js防抖和节流

    浅谈js防抖和节流

  • Javascript 基础

    1、函数防抖和函数节流 【《javascript高级程序设计》里,函数节流是这里讲的函数防抖。】函数防抖: 在事件...

  • js 防抖 节流

    节流 防抖1 防抖2

  • 2019-03-27

    js的防抖和节流 据我所知防抖和节流都是为了优化作用,减轻浏览器和服务端的负担,防抖和节流俩个的英文要记住: de...

  • js的防抖和节流

    js的 防抖(debounce)和 节流(throttle ) 防抖和节流一般用于高频触发事件,属于浏览器性能优化...

  • 手写防抖和节流函数实现

    1. 认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流...

  • 实现防抖和节流

    一、认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动...

  • 2019-04-24关于节流和防抖

    节流: 应用场景: 防抖: 应用场景: 1.节流 2.防抖

网友评论

      本文标题:防抖和节流

      本文链接:https://www.haomeiwen.com/subject/wbrknhtx.html