手写实现节流防抖，就这？

最新推荐文章于 2024-05-27 20:46:11 发布

代码打太久会头疼

最新推荐文章于 2024-05-27 20:46:11 发布

阅读量484

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43693458/article/details/107537382

版权

防抖函数

参考掘金文章

作用：频繁触发，第一次与不触发的时候执行函数

节流函数(throttle)

作用：在某一个时间内函数只被执行已

使用场景：当一个函数被频繁执行，而你希望它只是在某个时间段内只执行一次，这时候你就可以用节流函数了，如滚动监听,窗口resize，这些执行频繁的函数

实现代码:

function throttle(fn,delay){
  let flag = true // 是否已有定时器
  let timer = null 
  return function(...args){
    if(!flag) return
    flag = false
    let _this = this
    clearTimeout(timer) // 清除
    timer = setTimeout(()=>{
      fn.apply(_this,args)
      flag = true
    },delay)
  }
}
// 使用
let throttleFunc = throttle(scrollEvent, 300)
document.addEventListener("scroll", function () {
  throttleFunc(123)
})
function scrollEvent(args) {
	console.log("滚动做点啥事" + args + "," + this.a);
}
// 滚动做点啥事123,cao

防抖函数

作用：频繁触发，第一次与不触发的时候执行函数

使用场景：函数频繁执行，但是你希望触发该函数的事件停止之后再去执行该函数，例如，提示搜索框，需要向远程检索关联数据，如果每输入一个字符串就发起一次请求，这时候就可以使用防抖函数了

思想：每次事件触发都会删除原有定时器，建立新的定时器。通俗意思就是反复触发函数，只认最后一次，从最后一次开始计时。

实现代码：

function debounce(fn,delay){
  let timer = null
  return function(...arg){
    if(timer) clearTimeout(timer)
    let _this = this
    timer = setTimeout(()=>{
      fn.apply(_this,args)
    },delay)
  }
}
// 使用
let debounceFunc = debounce(scrollEvent, 300)
document.getElementById("my_input").addEventListener("keydown", function () {
      debounceFunc(456)
})
function scrollEvent(args) {
  console.log("滚动做点啥事" + args + "," + this.a);
}