js防抖和节流

简介: 防抖(Debounce)和节流(Throttle)是两种常用的优化技术,用于控制函数的执行频率,特别是在处理频繁触发的事件或函数调用时。
  • 防抖(Debounce):
    防抖的思想是,在指定的时间间隔内,只执行最后一次触发的函数调用。如果在这段时间间隔内又有触发事件发生,会重新开始计时。这样可以有效地降低函数的执行次数。

实现防抖的常见做法是通过设置一个定时器,在触发事件后,延迟一段时间后执行函数。如果在延迟时间内再次触发事件,就清除之前的定时器,并重新设置新的定时器。

下面是一个防抖的示例代码:

function debounce(func, delay) {
   
  let timer;

  return function(...args) {
   
    clearTimeout(timer);

    timer = setTimeout(() => {
   
      func.apply(this, args);
    }, delay);
  };
}

// 使用防抖函数
const debouncedFn = debounce(() => {
   
  // 执行的函数逻辑
}, 500);

// 在事件处理中应用防抖
element.addEventListener('input', debouncedFn);
  • 节流(Throttle):
    节流的思想是,在指定的时间间隔内,无论触发事件多少次,只执行一次函数调用。可以控制函数的执行频率。

实现节流的常见做法是通过设置一个定时器,在函数调用后的指定时间间隔内,禁止再次执行函数。

下面是一个节流的示例代码:

function throttle(func, delay) {
   
  let timer;
  let canRun = true;

  return function(...args) {
   
    if (!canRun) {
   
      return;
    }

    canRun = false;

    timer = setTimeout(() => {
   
      func.apply(this, args);
      canRun = true;
    }, delay);
  };
}

// 使用节流函数
const throttledFn = throttle(() => {
   
  // 执行的函数逻辑
}, 500);

// 在事件处理中应用节流
element.addEventListener('scroll', throttledFn);

需要注意的是,防抖和节流的使用场景不同。防抖适用于需要在事件停止触发后执行一次函数的场景,例如搜索输入框的输入事件,当用户停止输入一段时间后再进行搜索。节流适用于需要在一定时间间隔内执行函数的场景,例如页面滚动事件,限制事件的触发频率。根据具体的需求,选择合适的优化方式可以提升用户体验和性能。

相关文章
|
1月前
|
JavaScript
JS中防抖和节流的区别是什么
JS中防抖和节流的区别是什么
16 0
|
1月前
|
JavaScript 前端开发 UED
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
【面试题】面试官:说说你对js中的 防抖 和 节流 的理解
|
1天前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
11 0
|
28天前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
12 0
|
28天前
|
JavaScript 前端开发 UED
|
1月前
|
JavaScript 前端开发 UED
JavaScript:节流&防抖
JavaScript:节流&防抖
24 1
|
1月前
|
JavaScript 前端开发 搜索推荐
面试官:请说说JS中的防抖和节流
面试官:请说说JS中的防抖和节流
|
1月前
|
前端开发 JavaScript 程序员
【面试题】 js-面试官要求手写节流防抖?
【面试题】 js-面试官要求手写节流防抖?
|
3月前
|
JavaScript 前端开发 Java
手写JavaScript防抖节流和休眠函数
防抖原理是在一定时间内,只有最后一次操作,再过延迟的时间后执行,一般用于防止用户多次重复点击按钮,只会触发最后一次
24 0
|
3月前
|
JavaScript
js的节流与防抖
js的节流与防抖
25 0

相关产品

  • 云迁移中心