js事件的防抖和节流

1.事件防抖

 

在函数频繁触发时在设置特定时间段内只调用最后一次，频繁调用时只要在时间段内，就会取消之前的调用。

如：input实时搜索，接口触发次数频繁，但是没有必要。可以等输入停止一定时间内再去调用。

代码实现

// 防抖 最后一次请求延迟 一定时间触发
	function debounce(fn, delay = 500){
		let t = null;
		return function(e){
			if(t){
				clearInterval(t)
			}
			t = setTimeout((e)=>{
				fn.call(this,e)
				t = null;
			},delay)
			
		}
	}

 

2.事件节流

在函数频繁触发时在设置特定时间段内只调用一次，从而达到多次变成少次，从而缓解浏览器或者服务器压力，比不影响功能。

如：window.resize 和 mousemove 触发时频率特别高，可以在一定时间内调用一次，就能实现需求。

代码实现

	//节流 规定时间内才会执行一次
    function throttle1(fn,during) {
        let start =  0
        return function(e){
            const end = Date.now() 
            if(end - start > during){
                start = Date.now()
                fn.call(this,e)
            }
        }  
    }
	
	function throttle2(fn,during) {
        let t = null
        return function(e){
			if(!t){
				t = setTimeout(()=>{
					fn.call(this,e)
					t = null
				},during)
			}
        }  
    }