日常开发小汇总(7) 通用防抖函数

通用防抖函数

//通用防抖函数 返回一个新函数，用来延迟fn操作
        function debounce(fn,duration){
            let timer;
            return function(){
                let curT = this //存储函数中的this
                clearTimeout(timer) //清空其他的定时器
                let arr = Array.prototype.slice.call(arguments,0) //获取函数调用时传递的参数数组
                timer = setTimeout(()=>{
                    fn.apply(curT,arr)
                },duration)
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12

使用示例

//通过debounce函数加工转换为新的函数
  let newFn = debounce(function(e){
            console.log("change",this,this.value)
            console.log("change",e)
        },1000)
        const inp = document.querySelector("input") //获取input元素
        // 添加输入事件监听
        inp.addEventListener('input',newFn) 
1
2
3
4
5
6
7
8

<div>
        <input type="text">
    div>
1
2
3