防抖和节流

防抖

什么是防抖

简单来说就是 对于短时间内连续触发的事件，防抖的含义是让某个时间期限内,事件只触发一次

我们在写项目代码的时候,有时因为某些需求,需要根据一定条件进行触发事件(比如你要时时监听一个input框内容的变化,来访问后台给出提示)。当我们进行监听后会发现，每一次变化都会去访问后台一次,而我们想要的是触发结束后,一定时间内没有再发生改变才进行触发。

    function 防抖函数名(callback, time) {   //callback是你打算执行的函数,time是延迟的时间
    let timer = null;       //利用闭包来防止污染作用域
    return function() {   
        if (timer) {           //如果重复触发就清除计时器
            clearTimeout(timer)
        }
        timer = setTimeout(callback, time)    //第一次触发时设置一个计时器,如果重复触发就清除计时器再重新设置一个计时器,如果没有再触发那么第一次设置的计时器照常触发
    }
}

节流

什么是节流

和防抖类似，节流是当函数执行一次后,一定时间内使其无法执行,过了这段时间后再使其可以触发

最常见的例子就是我们在注册账号时,发送手机验证码的时候,一般都是一定时间内只能获取一次。

function 节流函数名(callback,time){   //同上  
		let flag = true	    //声明一个变量,给他一个状态
		return function() {
   		if(!flag){             
       		//状态是真的时候 不触发 直接返回false
       		return false 
   		}
    		flag = false     //第一次会触发 然后状态改成假 
    		setTimeout(() => {  //生成一个计时器,在计时器执行完成之前,状态一直是假,所以不会再触发callback(),只有计时完成的时候才会触发一次callback()，并把状态改回真,使其可以重新触发
        		callback()
        		valid = true;
    		}, delay)
		}
}