js 节流和防抖

最新推荐文章于 2025-04-11 00:03:56 发布

借我一秋风

最新推荐文章于 2025-04-11 00:03:56 发布

阅读量94

点赞数

文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/qq_53489791/article/details/120578604

版权

节流与防抖

在JavaScript中，频繁的触发事件会对DOM处理造成性能消耗，会加重浏览器的负担，降低用户体验。所以，我们可以采用函数防抖（debounce）和函数节流（throttle）的方式来减少调用频率，对实际效果也不会有太大影响。

函数防抖 (debounce)

短时间内多次触发同一事件,会重新开始计时，知道等待时长到达后执行。触发事件后等待一段时间后执行，如果等待时再次触发事件，将会重新进入等待时间。

// 函数防抖
        function debounce(){
            var timer = null;
            // console.log(arguments);
            var hanlder = arguments[0];

            // return function(){
                // this ->  ipt
                // console.log(this);
                var that = this;
                clearTimeout(timer);
                timer = setTimeout(function(){

                    // 累加  return  对数组求和
                    // console.log(ipt.value);

                    hanlder.call(that);
                },500);
            // }
        }

函数节流（debounce）

一个事件的触发一段时间内只触发一次，函数节流主要有两种实现方法：时间戳和定时器。

<body>
    <div id="show">0</div>
    <button>增加</button>
    <script>
        // 获取元素
        var show = document.getElementById('show');
        var btn = document.getElementsByTagName('button')[0];

        // 用定时器实现函数节流，一个事件的触发 一段时间内只触发一次
        // 点击后延迟一秒触发
        // var timer = null;
        // btn.onclick = function() {

        //     if (timer) {
        //         return
        //     }
        //     timer = setTimeout(function() {
        //         show.innerHTML = (+show.innerHTML) + 1;
        //         timer = null;
        //     }, 1000)

        // }

		// 用定时器实现函数节流
        // 点击后立即执行
        // 事件戳：记录每一次点击的时间  下一次与上一次进行比较 差值 <1000
        var lastTime = 0;
        btn.onclick = function() {
            var sum;
            // 得到点击当前时间
            var nowTime = new Date();
            if (nowTime - lastTime >= 1000) {
                show.innerHTML = (+show.innerHTML) + 1;
                lastTime = nowTime;
            }
        }
    </script>
</body>