1. 防抖和节流

防抖和节流

目的：当多次执行某一动作，进行函数调用次数的限制，节省资源

防抖：在事件触发n秒后执行函数，如果在n秒内再次触发，重新计时【防止抖动】

节流：当多次执行某一动作，每隔一段时间，只执行一次函数 【节省交互】

// 防抖
function debounce(fn, delay) {
    let timer = null
    return function (args) {
      if (timer) {
        clearTimeout(timer) 
      }
      // 这里不是箭头函数
      timer = setTimeout(function() {
        fn.call(this, args)
      }, delay)
    }
}

// 或者
function debounce(fn, delay) {
  let timer = null
    return function (args) {
      if (timer) {
        clearTimeout(timer)
      }
      // 这里不是箭头函数
      timer = setTimeout(function() {
        fn(args)
      }, delay)
    }
}

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测(change、input、blur、keyup等事件触发，每次键入都会触发)
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
鼠标的mousemove、mouseover
导航条上，用户不停的在导航区域滑动相当于

// 节流
// 1. setTimeout方式
function throttle(fn,delay){
    let timer;
    return function(){
        let _args = arguments;
        let _this = this;
        if(timer){//如果有定时器，退出
          return
        }
        timer = setTimeout(function(){
          fn.apply(_this,_args);//定时器结束执行函数
          timer = null;//清除定时器，可以再次进入
        },delay)
    }
}
let testThrottleFn = throttle(test,3000);
function test(a){
    console.log('打印 '+a)
}
window.onscroll = function(){
    testThrottleFn('bbbb')
}

// 2. new Date方式
function throttle(fn,delay){
    let previous = 0;
    return function(){
        let _this = this;
        let _argus = arguments;
        let now = new Date();
        //不同时间取值的new Date()是可以相减的
        if(now-previous>delay){
          fn.apply(_this,_argus);
          previous = now;
        }
    }
}
let testThrottleFn = throttle(test,2000);
function test(b){
    console.log('出现 '+b)
}
window.onscroll = function(){
    testThrottleFn('8888')
}

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

滚动加载，加载更多或滚到底部监听，window.onscroll和滑到底部自动加载更多
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交

区别：

防抖和节流都是闭包的具体实现，区别在于在一段时间内，防抖仅最后一次操作有效，节流仅第一次操作有效
防抖：多次点击，只触发一次（它适用于需要在连续触发的事件中只执行最后一次的情况，例如搜索框输入后延迟发送请求。）
节流：一个时间段，只触发一次（它适用于需要限制函数执行频率的情况，例如滚动事件中更新元素位置。）

// 区别：

// 防抖：
 if(timer){
  clearTimeout(timer)
}

// 节流：
if(timer){
  return
}