JS中的防抖和节流

最新推荐文章于 2024-10-04 13:18:14 发布

江江春

最新推荐文章于 2024-10-04 13:18:14 发布

阅读量172

点赞数

文章标签：前端 es6 javascript

本文链接：https://blog.csdn.net/qq_46222031/article/details/121538998

版权

本文介绍了两种控制函数频繁触发的技术——防抖与节流。防抖通过setTimeout实现，在设定的时间间隔内将多次触发变为一次，适用于限制如输入验证、窗口resize等场景。节流则是通过限制执行频率，确保在一定时间间隔后才执行，适用于滚动事件、定时刷新等场景。两种技术在优化性能和防止请求过多方面具有重要作用。

摘要由CSDN通过智能技术生成

目的

限制函数执行次数，防止请求过多

防抖

通过settimeout的方式，在一定时间间隔内，将多次触发变成一次触发

通过t是否为null来判断是否为第一次点击，若是第一次点击则直接调用函数，若不是则设置t的延时置空。

两个小点：通过apply让被调函数指针指向正确的方向

用apply来传递arguments数组

btn.addEventListener('click', debounce(submit, 2000), false)
        function submit(e) {
            console.log('我调用了')

        }
        function debounce(fn, timer) {
            var t = null;

            return function () {
                var firstClick = !t
                if (t) { clearTimeout(t) }  //如果t有值清除上一次的计时器

                if (firstClick) {   //若t无值，是第一次，直接执行
                    fn.apply(this.arguments)
                }

                t = setTimeout(() => {  //用以在一段时间后再次让其为第一次执行
                    t = null;
                }, timer)


            }
        }

节流

减少一段时间的触发频率

通过时间差来判断是否点击成功，每一次点击都更新时间，点击太快，时间差太小就不通过。通过后要重置开始时间点

function throttle(fn,delay){
            var begin=0
            return function(){
                var cur =new Date().getTime();  //记录当前点击时间  
                if(cur-begin>delay){            //当前时间-开始时间大于延迟，执行函数并更新
                    fn.apply(this.arguments)
                    begin=cur                   //更新开始时间
                }
            }
        }