节流和防抖

JavaScript

2023年01月13日 18:08:241342

什么是抖

这里可以理解为:一个函数在一段时间内(通常比较短),执行了很多次,造成了比较大的抖动。

例如:

function windowScroll() {
  console.log('window scroll');
}

window.addEventListener('scroll', windowScroll);

//windowScroll() 会在window发生滚动时高频触发,造成了很大的性能浪费。 

如何防抖

防抖:即让高频触发的函数在一定的时间内只执行一次,比如,我想让页面滚动完毕之后再执行函数。

例如:

let timer = null;

function windowScrollOver() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    console.log('window scroll over');
  }, 200);
}

window.addEventListener('scroll', windowScrollOver);

//这个例子实现了:当window滚动的动作结束200ms之后,输出window scroll over
//在window发生滚动时,会高频调用绑定的方法,此时,在方法内判断上一次调用的时间是否过于接近,若过于接近,则清除上一次的timeout,并定义一次新的timeout。

什么是流

这里可以理解为:一个函数在一段时间内(通常比较长),执行了很多次,造成了比较大的浪费。

如何节流

就像水龙头一样,开大了,水流就大,开小点,水流就小,节流的目的就是稀释函数的执行频率,让其在每段时间内只执行一次。

例:

function throtte(func, time){
  let activeTime = 0;
  return () => {
    const current = Date.now();
    if(current - activeTime > time) {
      func.apply(this, arguments);
      activeTime = Date.now();
    }
  }
}

赞 2
收藏
分享

本作品系 原创,作者:你不熟悉的x先生

原文链接:https://shiniest.cn/blog/article/156

文本版权:文本版权归作者所有

转载需著名并注明出处(禁止商业使用)

评论和回复

0/500
    没有更多啦~
    怎么一条数据都没有呢?
简介
防抖:动作绑定事件,动作发生后一定时间后触发事件,在这段时间内,如果该动作又发生,则重新等待一定时间再触发事件。 节流: 动作绑定事件,动作发生后一段时间后触发事件,在这段时间内,如果动作又发生,则无视该动作,直到事件执行完后,才能重新触发。
目录
推荐阅读

D&D By x先生 With