手写防抖节流

最新推荐文章于 2023-11-30 10:35:27 发布

htt2321

最新推荐文章于 2023-11-30 10:35:27 发布

阅读量39

点赞数

文章标签：前端 javascript vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_43204464/article/details/128814392

版权

代码来源： b站晓舟报告前端面试题：防抖与节流（二）

防抖：多次触发，只执行一次。（连续触发只有间隔超过自定义时间才执行一次，计时器一直在计时，如果触发时，计时器不为null，计时器就清空，如果计时器为null，就可以执行函数体了）

<body>
     <div>
        <input type="text">
    </div>
  <script>
          //获取dom元素
        let inp = document.querySelector('input')
         //给inp添加oninput事件 给事件用防抖限制起来
        inp.oninput = debounce(function(){
            //这里的this是window，所以要更改this的指向
            console.log(this.value)
            
        },500)
            //创建防抖函数，接收俩参数
           function debounce(fn,delay){
             
            let timer = null
             //闭包函数，（函数内部的函数，能接收外部的变量timer）
            return function(){
                
                if(timer !== null){
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    //来更改this的指向
                    fn.call(this)
                }, delay);
            }
           }
    </script>
</body>