js中的防抖和节流

最新推荐文章于 2025-10-17 19:44:31 发布

原创最新推荐文章于 2025-10-17 19:44:31 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文详细介绍了前端开发中两种重要的性能优化技术——防抖(debounce)和节流(throttle)。防抖确保在设定时间内只执行最后一次函数调用，而节流则限制函数在特定时间间隔内只能执行一次。通过示例代码，展示了如何实现防抖和节流函数，并在输入提交场景中应用。理解并正确使用这两种技术可以显著提升用户体验，防止因频繁触发导致的性能问题。

防抖

防抖：在一段时间内允许多次触发函数，但是只在最后一次有效（执行）
做法：
每次触发函数清除掉原来的定时器，重新开始计时。
如果在规定时间内不再触发函数，则执行，否则，清除掉之前的定时器，重新计时。


    <!-- 防抖：防抖和节流不同点在于，函数在一段时间内可以多次调用，尽仅在最后一次调用有效 -->
    <!-- 每一次的点击都要清除掉之前的定时器，重新定时 -->
    <input type="text">
    <button>提交</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', debounce(submit, 2000));
        function submit() {
            console.log('点击了');
        }
        //   为submit函数添加防抖
        function debounce(func, delay) {
            var timeout;
            return function () {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(this, arguments);
                }, delay)
            }
        }
    </script>
</body>

节流

节流：在一段时间内，只能触发一次函数。
做法：触发函数时判断是否到达了指定时间，如果到达了指定时间，执行；否则不执行弹出警告

时间戳法


    <input type="text">
    <button>提交</button>
    <script>
          var btn = document.querySelector('button');
        btn.addEventListener('click', throttle(submit, 2000));
         function thorttle(func,delay){ //传入需要节流的函数，延迟时间
            var last = 0; // 上一次触发的时间
            return function(){
                var now = Date.now(); //获取当前时间
                if(now >= delay + last){
                    //当前时间已经符合再次触发条件了
                    func(this,arguments);
                    // console.log(this);  //this指向window
                    last = now; //当前的时间就变为了上次的
                }else{
                    console.log('时间未到');
                }
            }
        }
    </script>

定时器法

<body>
    <input type="text">
    <button>提交</button>
    <script>
          var btn = document.querySelector('button');
        btn.addEventListener('click', throttle(submit, 2000));
        function thorttle(func, delay) {
            //设置一个空的定时器
            var timer = null;
            return function () {
                if (!timer) {
                    // 如果定时间为空，执行操作
                    func.apply(this, arguments);
                    // 设置定时器，并且在delays后定时器变为空时，可再次操作
                    timer = setTimeout(() => {
                        timer = null;
                    }, delay);
                } else {
                    console.log('时间未到');
                }
            }
        }
    </script>