防抖与节流

旺仔小拳头I

已于 2022-04-05 15:19:00 修改

阅读量575

点赞数 1

分类专栏：前端学习文章标签： javascript

于 2022-04-04 20:36:51 首次发布

本文链接：https://blog.csdn.net/YeChan414/article/details/123956452

版权

前端学习专栏收录该内容

26 篇文章 1 订阅

订阅专栏

防抖

先来看一个例子，在页面中放置一个input框，然后使它每次输入值就会在控制台打印123

<body>
<input placeholder="请输入" />
<script>
    let ipt = document.querySelector('input')
    ipt.oninput = function(){
        console.log("123")
    }
</script>
</body>

结果如下

当不停的进行输入时，控制台会不停的打印123，也就是说不稳定，在抖动

什么是防抖

所谓防抖，就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间

实现防抖的方式

时间戳和定时器

使用定时器实现防抖

<input placeholder="请输入" />
<script>
    let ipt = document.querySelector('input')
    ipt.oninput = debounce(1000)

    //防抖函数封装
    function debounce(wait) {
        let timeOut = null  //先定义一个计时器
        return function () {
            if (timeOut) clearTimeout(timeOut)  //如果之前存在计时器，也就是之前调用过debounce函数，即输入过东西，那么就清空之前的定时器
            timeOut = setTimeout(function () {  //重新设置一个计时器来打印输出123
                console.log("123")
            }, wait);
        } 
    }
</script>

简单来记就是有定时器就关闭定时器重新创建一个新的定时器

注意：这里的timeOut是闭包内的，所以会将生命周期延长，之后的每个定时器都是这个timeOut

这样，当我们在输入框中输入东西时，就会开始计时，如果1s之内没有再在输入框中输入东西，则会打印一个"123"，否则，则会重新开始计时，重复上述操作

节流

再来看一个例子

<div class="box" style="width:200px;height:200px;background-color: turquoise;"></div>
<script>
    let box = document.querySelector('.box')
    box.onmousemove = function(){
        console.log("123")
}
</script>

结果如下

当用鼠标在左边的色块上轻轻滑动一下，控制台就输出了好多123

什么是节流

所谓节流，就是指连续触发事件但是在n秒中只执行一次函数

实现节流的方式

时间戳和定时器

使用定时器实现节流

<div class="box" style="width:200px;height:200px;background-color: turquoise;"></div>
<script>
    let box = document.querySelector('.box')
    box.onmousemove = throttle(1000)

    //节流函数封装
    function throttle(time){
        let timeOut = null  //定义一个定时器
        return function(){
            if(!timeOut){
            timeOut = setTimeout(() => {
                console.log("123")
                timeOut = null
            }, time);
        }
        }
    }
</script>

简单来记就是没有定时器就创建一个定时器用完再置空

这样，当我们不停轻扫这个色块时，每隔1s就会输出一次"123"

节流具有稀释事件触发频率的作用