js的节流和防抖

简介: js的节流和防抖

在JavaScript中,节流(Throttling)和防抖(Debouncing)是两种常用的优化高频率触发的事件或函数调用的技术。

  1. 防抖(Debouncing)

防抖的基本思想是:一定时间内,如果事件持续触发,那么只执行最后一次,忽略中间的触发。常用于输入搜索、窗口调整大小等场景。

例如,下面的函数是一个简单的防抖实现:

function debounce(func, wait) {  
  let timeout;  
  return function() {  
    const context = this;  
    const args = arguments;  
    clearTimeout(timeout);  
    timeout = setTimeout(function() {  
      func.apply(context, args);  
    }, wait);  
  };  
}

使用方法:

const myEfficientFn = debounce(function() {  
  // 实际的函数逻辑  
}, 250);
  1. 节流(Throttling)

节流的基本思想是:在一定时间内,事件最多只触发一次。常用于滚动、resize等场景。

例如,下面的函数是一个简单的节流实现:

function throttle(func, limit) {  
  let inThrottle;  
  return function() {  
    const context = this;  
    const args = arguments;  
    if (!inThrottle) {  
      func.apply(context, args);  
      inThrottle = true;  
      setTimeout(() => inThrottle = false, limit);  
    }  
  };  
}

使用方法:

const myEfficientFn = throttle(function() {  
  // 实际的函数逻辑  
}, 250);

总结:防抖和节流都可以用于限制高频率的事件处理,但它们的行为略有不同。防抖更适用于“减少执行次数”的场景,而节流更适用于“限制执行频率”的场景。

相关文章
|
2月前
|
JavaScript
JS封装节流函数
JS封装节流函数
15 0
|
4月前
|
JavaScript
JS中防抖和节流的区别是什么
JS中防抖和节流的区别是什么
23 0
|
6天前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
12 0
|
2月前
|
JavaScript
|
2月前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
53 3
|
3月前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
37 0
|
4月前
|
JavaScript 前端开发 UED
|
4月前
|
JavaScript 前端开发 UED
JavaScript:节流&防抖
JavaScript:节流&防抖
30 1
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
28 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0