js 函数防抖和函数节流 理解和掌握

函数防抖
概念：规定函数至少间隔多久执行
场景：

代码：

remitSearch (val) {
	if (this.timeOutId) clearTimeout(this.timeOutId)
	this.timeOutId = setTimeout(() => {
			this.key = val;
			this.getdetaillist()
	},300)
	console.log(this.timeOutId);
},

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
函数执行过一次后，在n秒内不能再次执行，否则推迟函数执行
下一次函数调用将清除上一次的定时器，并用setTimeout重新计时

---

函数节流
概念：限制一个函数在一定时间内只能执行一次
场景：

鼠标移动事件也是一个常用的场景
代码：

<script>
   function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        console.log(args)
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,3000));   
</script>

设置一个标记timer,为null,将定时器的id赋给timer,在定时器中将timer设置为null，保证定时器中的函数，每隔3000s掉一次，3000s内多次执行mousemove，不能调用函数。
函数节流方法很多，这只是其中一个。