防抖和节流的概念及代码实现

防抖和节流

一、防抖

定义：触发高频事件后，n秒内函数只会执行一次.如果n秒内高频事件再次被触发，则重新计算时间。

常用事件：

• 搜索框搜索输入。只在用户最后一次输入完，再发送检索请求。
• 手机号、邮箱验证输入检测 onchange oninput事件
• 窗口大小Resize。只在窗口调整完成后，计算窗口大小。防止重复渲染

代码实现：

（1）函数

const antiShake = (fn,wait,immediate)=>{
	let timer = null;
	return function(...args){
		if(timer) clearTimeout(timer);
		if(immediate && !timer){
			fn.call(this,args);
		}
		timer = setTimeout(()=>{
			fn.call(this,args);
		},wait);
	};
};
const betterFn = antiShake(()=>console.log("防抖执行了")，1000，true);
document.addEventListener("scroll",betterFn);

(2)vue实现

<script>
export default{
    data(){
        return {
            timer:null
        };
    },
    methods:{
        antiShake(){
            clearTimeout(this.timer){
                this.timer = setTimeout(()=>{
                    console.log('防抖执行');
                },200);
            }
        }
    }
};
</script>

二、节流

定义：在单位时间内，只会触发一次事件。如果事件触发后，再次重复触发了同一事件，则忽略后面触发的事件，直到第一次事件的计时结束。

常用事件：

• 懒加载、滚动加载、加载更多或监听滚动条位置
• 防止高频点击提交，防止表单重复提交

代码实现：

（1）函数

function throttle(fn,wait){
    let pre = 0;
    return function(..args){
        let now = Date.now();
        if(now - pre >= wait){
            fn.apply(this,args);
            pre = now;
        }
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));

（2）vue实现

<script>
export default{
    data(){
        return{
            isFinshed:true
        };
    },
    methods:{
        throttle(){
            if (this.isFinshed === true){
                this.isFinshed = false;
                this.timer = setTimeout(()=>{
                    console.log('节流执行');
                    this.isFinshed = true;
                },200);
            }
        }
    }
}
</script>