js防抖节流及应用场景

一、js防抖debounce

js防抖，即事件触发后要过一定时间后才可以继续执行，应用场景，例如如搜索提示，我们在搜索的时候会出现搜索提示，即通过input的input事件发送请求数据，这是一个很频繁的请求，但是我们不希望用户在输入过程中发送请求，即在停顿或停止的时候请求一下数据
实现方法：通过 setTimeOut延时处理

//防抖debounce代码：
function debounce(fn,delay) {
 let timeout = null，
 isFirstTime = true
 return function() {
     //第一次执行不用延时
     if(isFirstTime){

       fn.apply(this,arguments)
       isFirstTime = false;
     }
     // 每当用户输入的时候把前一个 setTimeout clear 掉
     clearTimeout(timeout); 
     // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
     timeout = setTimeout(() => { //使用箭头函数不用保存this
         fn.apply(this, arguments);
     }, delay || 500);
 };
}

//测试拉动窗口查看输出
window.onresize = debounce(function(){
 console.log(1)
},1000)

二、节流

节流（throttle）则是限定事件在一定时间内只能执行一次,应用场景，监听滚动条滚动加载数据&