LAYUI 防抖 节流

// 创建节流 贤心
var throttle = layui.throttle(function () {
  console.log(1)
}, 300);

// 执行节流
throttle();



防抖

短信验证码

滚动事件

表单重复提交

页面 resize 事件

input 事件（当然也可以用节流，实现输入框实时搜索）

节流

scroll 事件，单位时间后计算一次滚动位置

input 事件

播放事件，计算进度条

一、防抖
点击回城,需要等待一定的时间才能回城成功,假若我们在回城的时间内频繁的再按回城的话，回城时间就会重新开始计算，只有你在按回城的最后一次并等待时间才能回城成功。

同理,我们每次在输入框输入值 等待一定的时间,就会触发我们的 后台请求函数,如果我们一直输入的话计时器就会重新开始计算，只有你在最后一次调用有效

这样的意义是事件被触发后,在n秒后执行请求函数，如果在n秒内多次触发事件,则会重新开始计时

// 防抖
function debounce (fn, delay) {
  // 时间期限
  var delays = delay || 200;
  var timer;
  // 闭包
  return function () {
    // 考虑作用域，上下文环境，apply需要用到this对象
    var th = this;
    // 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn（不确定函数到底有多少个参数，用arguments来接收）
    var args = arguments;
    // 判断还在定时，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      timer = null;
      // 执行方法
      fn.apply(th, args);
    }, delays);
  };
}
二、节流
我们释放完技能后需要等待一定的时间才能再次释放, 如果我们 在技能冷却未好的情况下,是释放不出来的。

同理，我们每次在输入框输入值,再点击我们的button按钮发生请求后台后,需要等待一定的时间才能再次调用请求函数。

用户频繁的点击的话,就会向服务器请求多次数据,虽然可以返回到数据,但是我们希望的是用户只有在一段时间之后，才能再触发我们的请求后台数据函数，这就是节流

总的来说，节流就是 在规定的时间内，函数只会执行一次,如果在规定时间内多次触发,也还是只有一次有效

// 节流 定时器 + 时间戳
function throttle (func, delay) {
  var timer = null
  var startTime = Date.now()
  return function() {
    // 结束时间
    var curTime = Date.now()
    // 间隔时间 = 延迟的时间 - （结束时间戳 - 开始时间戳）
    var interval = delay - (curTime - startTime)
    var th = this
    var args = arguments
    clearTimeout(timer)
    if(interval <= 0) {
      // 证明可以触发了
      func.apply(th, args)
      // 重新计算开始时间
      startTime = Date.now()
    } else {
      // 继续等待
      timer = setTimeout(func, interval)
    }
  }
}
layui里面封装的节流、防抖

// 防抖
  Layui.prototype.debounce = function (func, wait) {
    var timeout;
    return function () {
      var context = this;
      var args = arguments;
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        func.apply(context, args);
      }, wait);
    }
  };
 
  // 节流
  Layui.prototype.throttle = function (func, wait) {
    var cooldown = false;
    return function () {
      var context = this;
      var args = arguments;
      if (!cooldown) {
        func.apply(context, args);
        cooldown = true;
        setTimeout(function () {
          cooldown = false;
        }, wait);
      }
    }
  };