防抖与节流

最新推荐文章于 2024-08-27 15:59:21 发布

全能大咖9

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量59

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/m0_57048774/article/details/125220296

版权

本文深入探讨了前端开发中用于性能优化的两种重要技术——防抖和节流。通过示例代码解释了如何实现输入事件的防抖处理，以避免频繁触发回调，以及滚动事件的节流处理，以控制执行次数，防止过度刷新。这些技术对于提升用户体验和降低资源消耗至关重要。

摘要由CSDN通过智能技术生成

防抖

     //捕获最后一次执行
        let inp = document.querySelector('input');
        let t = null;
        inp.oninput = function(){
            if(t !== null){
                clearTimeout(t);
            } 
            t = setTimeout(()=>{
                console.log(this.value);
            },500)
        }

节流

	//控制执行次数,不会不停的刷新
        let flag = true;
        window.onscroll = function(){
            if(flag){
                setTimeout(()=>{
                    console.log("反应");
                    flag = true;
                },1000)
            } 
            flag = false;
        }