防抖和节流

最新推荐文章于 2025-06-03 18:54:56 发布

月了不光

最新推荐文章于 2025-06-03 18:54:56 发布

阅读量419

点赞数

分类专栏： JS基础文章标签： javascript 前端 typescript

本文链接：https://blog.youkuaiyun.com/weixin_48315912/article/details/123007145

版权

JS基础专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了前端开发中两种重要的性能优化技术——防抖和节流。通过示例代码展示了如何在输入事件处理和按钮点击事件中应用防抖和节流，以减少不必要的计算和提高用户体验。防抖技术用于限制函数的执行频率，而节流则确保函数在特定间隔内均匀执行。

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

防抖和节流

防抖

let input=document.querySelector("input");
let timer=null;
input.oninput=function(){						//oninput 事件在用户输入时触发
    clearTimeout(timer);
    timer=setTimeout(()=>{
        console.log(this.value);
    },1000)
}

节流

let count=0;
let flag=true;
btn.onclick=funciton(){
    if(!flag)	return;
        flag=false;
    setTimeout(()=>{
        flag=true;
    },1000);
    
    console.log(++count);
}

let count=0;
(function(){
   let flag=true;
btn.onclick=function(){
    if(!flag)	return;
        flag=false;
    setTimeout(()=>{
        flag=true;
    },1000);
    
    console.log(++count);
} 
})()