防抖和节流

ctf_0226

已于 2023-03-16 09:56:40 修改

阅读量67

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript vue.js 文章标签： vue.js javascript

于 2021-01-05 11:05:43 首次发布

本文链接：https://blog.csdn.net/ctf_0226/article/details/112218918

javascript 同时被 2 个专栏收录

15 篇文章

订阅专栏

vue.js

13 篇文章

订阅专栏

本文介绍了JavaScript中防抖(debounce)与节流(throttle)的技术实现，通过具体示例展示了如何减少高频触发事件的回调次数，从而提高用户体验并节省资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖（debounce）



function debounce(fn,delay){
    let timer = null 
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
// 然后是旧代码
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000)

节流(throttle)

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 请注意，节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
    */

// 以下照旧
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)