javascript防抖,javascript防抖节流结合柯里化

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

js防抖函数的使用

function debounce(func, delay) {

let timer

//当前的this是指向window

return function (...args) {

//当前的this是指向dom元素

if (timer) {

clearTimeout(timer)

}

timer = setTimeout(() = {

func.apply(this, args)

}, delay)

}

例：div id="test"点击/div

实现隔3s执行一次的操作：

document.getElementById('test').addEventListener('click', debounce(function() {

console.log('执行完成之后的动作')

}, 3000))

记：事件回调函数里的this指向触发当前事件的DOM元素

相关问答

Q1: js防抖节流应用场景及写法

1.search搜索联想，用户在不断输入值时，用防抖来节约ajax请求。

2.滚动条滚动的时候触发事件

1.鼠标不断点击触发，mousedown(单位时间内只触发一次)

2.上拉触底加载更多

Q2: 【js】简单理解节流与防抖，搜索框的场景

在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。

防抖的实现思路：每次触发事件时都取消之前的延时调用方法：

节流的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：

Q3: JS的防抖和节流

应用场景： input输入信息进行搜索，如果每敲一个字符就请求后台接口，给后台的压力太大了，所以做好防抖，即让程序只执行最后一次的事件。

为解决该问题，探索到了两个解决方案：

直接使用lodash工具库的debounce方法

参考网址：

应用场景：滚轮滚动触发事件频繁，加上延迟可低频触发

看过了上面闭包防抖的写法，下面闭包节流的写法也很好理解了~

Q4: js防抖与节流

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间，简而言之，防抖就类似回城，打断就得重新回。

代码实现