防抖与节流

当事件上绑定了事件处理程序,当这个事件被持续触发时,一直会执行这个事件处理程序,比如onscroll、onresize,而这是没有必要的,甚至会影响性能,影响用户体验。因此,需要在绑定事件的时候做一些操作,使之执行事件处理程序不要那么频繁。主要有两种思路。

一、函数防抖

  当持续触发事件后,一段时间后没有再触发这个事件,执行事件处理程序。如果在设定时间到来之前,再次触发了这个事件,则重新开始计时

    var timer = null;
    document.body.onscroll = function(){
        clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
        timer = setTimeout(function(){
            console.log("函数防抖");
        }, 300);
    };

二、函数节流

复制代码
    var canRun = true;
    document.body.onscroll = function(){
        if(!canRun){
            // 判断是否已空闲,如果在执行中,则直接return
            return;
        }
        canRun = false;
        setTimeout(function(){
            console.log("函数节流");
            canRun = true;
        }, 300);
    };
复制代码

 

posted @   wenzizaigaoge  阅读(129)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示