节流

最新推荐文章于 2024-11-04 10:13:26 发布

※空白记忆√

最新推荐文章于 2024-11-04 10:13:26 发布

阅读量121

点赞数

分类专栏：节流文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_45316181/article/details/106719034

版权

节流专栏收录该内容

1 篇文章 0 订阅

订阅专栏

其实很简单：我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效， //过了这段时间后再重新激活（类似于技能冷却时间）。 // 效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。 // 实现 :这里借助setTimeout来做一个简单的实现，加上一个状态位valid来表示当前函数是否处于工作状态：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 2000px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>

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