防抖

最新推荐文章于 2023-04-02 22:02:09 发布

※空白记忆√

最新推荐文章于 2023-04-02 22:02:09 发布

阅读量84

点赞数

分类专栏：鼠标滚动案例文章标签： javascript 前端

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

版权

鼠标滚动案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            height: 2000px;
            background-color: aqua;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <!-- 防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，
    处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。 -->

    <!-- 返回顶部按钮 这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们现在提取出这个功能需求--
     监听浏览器滚动事件，返回当前滚条与顶部的距离 -->
</body>
</html>
<script>
// showTop需要防抖的函数
// delay [number] 毫秒，防抖期限值

// 首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如1000ms，然后：

// 如果在1000ms内没有再次触发滚动事件，那么就执行函数
// 如果在1000ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
// 效果：如果短时间内大量触发同一事件，只会执行一次函数。
// 实现：既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，
// 考虑维护全局纯净，可以借助闭包来实现
function debounce(showTop,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(showTop,delay)
    }
}
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置
// 对于短时间内连续触发的事件（上面的滚动事件），
// 防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。
</script>