函数的节流与防抖

最新推荐文章于 2022-11-16 22:00:42 发布

不太聪明的YA子

最新推荐文章于 2022-11-16 22:00:42 发布

阅读量115

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_45654184/article/details/103567005

版权

1.函数节流（连续触发同一事件按照一定时间间隔执行一次）；

2.函数防抖（连续触发同一事件，只执行最后一次触发）；

demo：

<body>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
</body>
<script>
    // 节流
    // function debounce(fn, wait) {
    //     var timeout = null; //定义一个定时器
    //     return function () {
    //         console.log('111'); //函数实际触发次数
    //         if (timeout !== null) {
    //             return
    //         } //跳出函数
    //         timeout = setTimeout(() => {
    //             console.log(Math.random()); //节流后执行次数
    //             timeout = null;
    //         }, wait);
    //     }
    // }
    // 防抖
    function debounce(fn, wait) {
        var timeout = null;      //定义一个定时器
        return function() {
            console.log('111'); //函数实际触发次数
            if(timeout !== null){
                clearTimeout(timeout)
            }  //清除这个定时器
            timeout = setTimeout(()=>{
                console.log(Math.random()); 
            }, wait);
        }
    }
    // 滚动事件
    window.addEventListener('scroll', debounce('', 1000));
</script>

需要执行的函数，我们在调用时的第一个值写，然后在定时器中的console.log执行即可。

在这两个函数中我们真正调用的并不是debounce函数，而是debounce函数中的return函数，所以触发事件时，我们执行的是return函数。假如使用click事件。那么原生写法应该是(a.οnclick= debounce('', 1000)),