关于防抖和节流的理解

简介: 防抖和节流是前端开发中常用的两种性能优化技术。

防抖和节流是前端开发中常用的两种性能优化技术。


防抖 (Debouncing) :

       含义是指在一定时间内,多次触发同一个事件,只执行最后一次操作。例如,当我们在搜索框中输入关键词时,输入框会不断触发 oninput 事件,如果每次输入都去请求服务器获取数据,会造成不必要的请求浪费。此时就可以使用防抖技术,将一定时间内的多次触发合并为一次操作,只请求一次服务器数据,减少了请求次数和服务器负载。


节流 (Throttling):

       含义是指在一定时间内,多次触发同一个事件,只执行第一次操作。例如,当我们拖动网页上的滚动条时,会不断触发 onscroll 事件,如果每次触发都去计算滚动距离,会造成浏览器性能下降。此时就可以使用节流技术,将一定时间内的多次触发限制为一次操作,只计算一次滚动距离,提高了浏览器性能和用户体验。


实现方法如下:


防抖的实现:

javascriptCopy Codefunction debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

节流的实现:

javascriptCopy Codefunction throttle(func, delay) {
  let timer;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}


相关文章
|
1月前
节流、防抖
节流、防抖
20 2
|
10月前
什么是防抖和节流,怎么实现一个防抖和节流?
功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
|
10月前
|
JavaScript 前端开发
节流与防抖
节流与防抖
31 0
|
11月前
|
JavaScript 前端开发
什么是防抖和节流?如何实现防抖和节流?
防抖(debounce)和节流(throttle)是 JavaScript 中常用的两种性能优化方法。
防抖&节流
防抖&节流
95 0
|
前端开发 JavaScript
关于防抖和节流我所知道的
关于防抖和节流我所知道的
44 0
|
缓存 JavaScript
防抖和节流
防抖和节流