防抖与节流基本思路

最新推荐文章于 2025-05-03 22:08:14 发布

原创最新推荐文章于 2025-05-03 22:08:14 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

js 同时被 2 个专栏收录

23 篇文章

订阅专栏

js基础

15 篇文章

订阅专栏

本文深入探讨了JavaScript中防抖(debounce)与节流(throttle)的技术实现，通过具体示例代码，详细解释了这两种技巧如何帮助优化事件监听器的响应效率，避免不必要的频繁调用，提升用户体验。


```javascript
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="qq">防抖</button>
    <div id="input">1</div>

    <button id='show'>节流</button>
    <div id="box">0</div>
</body>
<script>
    var qq = document.getElementById('qq');
    var input = document.getElementById('input');
    qq.onclick = hanlde(ss, 1000);
    //防抖
    //在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时

    //第一次点击,直接开始定时,timeout不再为空
    //第二次点击,此时time的变成定时器,但是会进入if,清空掉定时器,进行赋值
    //所以就重新开始定时
    //当不再点击后,定时器内的函数就执行了
    //如果是在wait时间内,if 会进不去,所以每次点击都是  当前时间减去上次点击时间
    //最后当时间>wait时,就会执行
    function hanlde(buy, time) {
        var timeout = null;
        return function () {
            if (timeout !== null) clearTimeout(timeout);
            timeout = setTimeout(buy, time);
        }
    };
    function ss() {
        input.innerHTML = Number(input.innerHTML) + 1
    }

    // //防抖立即执行
    // function hanlde(buy, time) {
    //     var timeout = null;
    //     var flag=true;
    //     return function () {
    //         if(flag==true){
    //             buy()
    //             flag=false
    //         }
    //         if (timeout) clearTimeout(timeout);
    //         timeout = setTimeout(buy, time);
    //     }
    // };
    // function ss() {
    //     input.innerHTML = Number(input.innerHTML) + 1
    // }





    //节流
    // 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
    let oBtn = document.getElementById('show');
    let oBox = document.getElementById('box');
    // 第一次点击,获取当前时间,当前时间会减去0,会大于值,所以肯定执行
    // 第二次点击,此时time的值为上一次点击的值,这时当前的时间减去上次的时间,
    // 如果是在wait时间内,if 会进不去,所以每次点击都是当前时间减去上次点击时间
    // 最后当时间>wait时,就会执行
    function debounce(handle, wait) {
        let time = 0;
        return function () {
            var newdate = new Date().getTime();
            if (newdate - time > wait) {
                handle();
                time = newdate
            }
        }
    }
    function buy() {
        oBox.innerText = parseInt(oBox.innerText) + 1
    }
    oBtn.onclick = debounce(buy, 1000)
</script>

</html>