防抖函数--入门理解

最新推荐文章于 2023-10-07 10:20:33 发布

张哈哈zhh

最新推荐文章于 2023-10-07 10:20:33 发布

阅读量503

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44383261/article/details/116651193

版权

防抖函数–入门理解

简单理解：持续触发一个事件，且一段时间内没有再次触发，那么事件处理函数只会执行一次。若设定时间到来之前，多次触发事件，则重新开始延迟（即重新开始计时器）。
这表示，再次触发同一事件时，需要将前一个定时器清理掉。

<body>
<input type="text" id="input">
<script>
//1s钟之后，打印输入框中的内容-----错误示例
var input=document.getElementById('input')
function debounce(){
    setTimeOut(function(){
        console.log(value)
    },delay)
}
input.addEventListener('keyup',function(e){
    debounce(1000,e.target.value)
})
</script>
</body>

上述代码的结果：打印出了每次按键的结果我们只想在1s内没有输入的时候，打印框中内容。上述代码实际触发了多个定时器。

<body>
    <input type="text" id="input">
    <script>
    //1s钟之后，打印输入框中的内容
    var input=document.getElementById('input');
    //防抖函数  
    let timer;
    function debounce(delay,value){
        // 清理定时器
        clearInterval(timer)
        timer=setTimeout(function(){
            console.log(value)
        },delay)
    }
    input.addEventListener('keyup',function(e){
        debounce(1000,e.target.value)
    })
    </script>
</body>

或者

<body>
    <input type="text" id="input">
    <script>
    var input=document.getElementById('input');
    //防抖函数
    
    function debounce(delay){
        let timer;
        // 清理定时器--闭包原理
        return function(value){
            clearInterval(timer)
            timer=setTimeout(function(){
                console.log(value)
            },delay)
        }
    }
    var d=debounce(1000)
    input.addEventListener('keyup',function(e){
        d(e.target.value)
    })
    </script>
</body>

结果：
只打印一次

张哈哈zhh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
防抖函数--入门理解

防抖函数–入门理解简单理解：持续触发一个事件，且一段时间内没有再次触发，那么事件处理函数只会执行一次。若设定时间到来之前，多次触发事件，则重新开始延迟（即重新开始计时器）。这表示，再次触发同一事件时，需要将前一个定时器清理掉。<body><input type="text" id="input"><script>//1s钟之后，打印输入框中的内容-----错误示例var input=document.getElementById('input')funct
复制链接

扫一扫