关于阻止scroll()事件多次执行的一个小方法

最新推荐文章于 2022-03-16 14:03:32 发布

转载最新推荐文章于 2022-03-16 14:03:32 发布 · 7.2k 阅读

文章标签：

#scroll事件

小技巧专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用scroll事件的防抖方法，通过条件判断加延迟执行的方式避免scroll事件被频繁触发导致的性能问题。该方法通过设置一个布尔型变量，在scroll事件触发时进行检查，如果该变量为真，则执行函数并将其设为假，之后通过setTimeout恢复变量状态。

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

最近写一个小demo，需要用到scroll事件，可又不希望它多次执行，网上搜了挺多方法，有一个虽然有点小bug但也挺好用，贴出来与大家分享，直接上栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link>
</head>
<body>

</body>
<script>
    //创建一些p标签,使网页可以滚动
    for(var i=0;i<20;i++){
        var p=document.createElement("p");
        var t=document.createTextNode("滚动条");
        p.appendChild(t);
        document.body.appendChild(p);
    }
    //下面是主要的执行代码，整体思路就是：条件判断+延迟执行。在事件执行之初，复活变量，事件执行完毕后 杀死变量
    var tur = true;
    window.onscroll = function (){
        if(tur){
            setTimeout(scro,500); 
            tur = false; //杀死变量
        }else{

        } 
    };
    //需要执行的函数
    function scro(){
        alert(1);
        tur = true;//复活变量
    };
</script>
</html>