前端常见面试题之节流防抖

前端常见面试题之节流防抖

1. 节流
   常见的节流使用场景：搜索框/技能冷却等；
   直接上代码：

function throttle（fn，delay）{
	var valid = true;//记录激活的状态
	return function（）{
		if(!valid){//非激活状态
			return false;
		}
		valid = false;//需要执行时
		sertTimeout(function(){
			fn();//需要放进来执行的函数例如我们执行搜索
			valid = true;//激活状态
		},delay);//delay表示延时的时间，比如我们想要在500ms内只执行一次函数，可以在后面调用这个封装好的函数进行时间设定
    }
}
//调用
throttle(search(),500)//表示我们调用节流函数，500毫秒内再执行这个函数

2. 防抖
   常见的使用场景：滚动事件（例如我们需要设置一定的滚动时间，再展示返回顶部的按钮）
   直接上代码：

function debounce(fn,delay){
	var time = null;
	//通过使用闭包的方式来实现防抖
	 return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}