函数节流

最新推荐文章于 2022-08-07 21:53:29 发布

原创最新推荐文章于 2022-08-07 21:53:29 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

JS学习历程专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了函数节流技术在Web开发中的应用，通过设置标志和使用setTimeout，避免了高频事件触发导致的性能问题，有效提高了用户体验。

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

函数节流

声明一个标志默认为false
触发后用setTimeout来写将要执行的主要内容（类似事件的回调），并将标志设为true–用来拒绝setTimeout（时间>=300ms）执行之前的事件监听，使用return来减少系统占用

流程

事件监听中定义标志

let 标志

绑定高频事件监听

document.getElementById('aaa').on('somefunction',()=>{
    
})

写出节流语句第一部分

if(!标志){
return;
}

写出节流语句第二部分

setTimeout(()=>{
    let main=function(){
    ...    
    }
    main();
    标志=true;
},300)

完整代码大致如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};
</script>
</html>