javascript的节流和防抖

最新推荐文章于 2024-11-11 19:29:13 发布

疾风知劲草~

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量191

点赞数

分类专栏：自定义函数方法文章标签： javascript 节流和防抖自定义函数

本文链接：https://blog.csdn.net/qq_36963007/article/details/115266969

版权

自定义函数方法专栏收录该内容

7 篇文章 0 订阅

订阅专栏

throttle() 节流

<body>
    <script src='./throttle.js'></script>
    <script>
        //绑定滚动事件
        window.addEventListener('scroll',throttle(function(e){
            console.log(e)
        },500))
    </script>
</body>

/*
    throttle(callback,wait)
    callback:回调函数   wait：等待时间
    返回结果是一个函数
*/
function throttle(callback,wait){
    //定义开始时间
    let start = 0
    //返回结果是一个函数
    return function(e){
        let now = Date.now()
        if(now - start >= wait){
            //若满足条件，则执行回调函数
            callback.call(this,e)
            //修改开始时间
            start = now
        }
    }

}

debounce（）防抖

<body>
    <input type="text"></input>
    <script src='./debounce.js'></script>
    <script>
        let input = document.querySelector('input')
       
        input.onkeydown = debounce(function(e){
            console.log(e.keyCode)
        },1000)
    </script>
</body>

/**
 * callback:回调函数
 * time:过了time时刻才执行回调，中途如果还要执行回调，就重新计时，等到了time时刻再执行最后一次回调
 * 利用定时器的timerId，实现防抖   定时器变量timerId初值为null 
 * 执行回调时，如果timerId！=null，说明之前有启动的定时器，这时关闭之前的定时器，重新启动定时器
 * 注：执行完回调函数，将timerId = null
 */
function debounce(callback,time){
    //定时器ID
    let timerId = null
    //返回一个变量
    return function(e){  
        //判断定时器ID
        if(timerId != null){
            clearTimeout(timerId)
        }
        //启动定时器
        timerId = setTimeout(()=>{ 
            //执行回调
            callback.call(this,e)
            //重置定时器变量
            timerId = null
        },time)
    }
}