节流：阻止函数被动的频繁调用

函数节流主要是解决非用户操作导致的函数被频繁调用的问题。

节流背景

浏览器中一些事件让函数非常频繁地调用，从而造成大的性能问题。

• window.onresize 事件。当浏览器窗口大小被拖动而改变的时候，这个事件触发的频率非常之高。
  如果我们在 window.onresize 事件函数里有一些跟 DOM 节点相关的操作，这时候浏览器可能就会吃不消而造成卡顿现象。
• mousemove 事件。同样，如果我们给一个 div 节点绑定了拖曳事件（主要是 mousemove），当 div 节点被拖动的时候，也会频繁地触发该拖曳事件函数。
• 上传进度。一些上传插件在真正开始上传文件之前，会对文件进行扫描并随时通知 JavaScript 函数，以便在页面中显示当前的扫描进度。通知的频率非常之高，大约一秒钟 10 次，很显然我们在页面中不需要如此频繁地去提示用户。

解决方案

其实上面的问题在于，函数被触发的频率太高，1s可能运行了 10 次，但显然我们可能500ms运行1次就够

function throttle(fn, delay = 500) {
  // 记录上一次运行时间，初始设置0
  let lastDate = 0;
  return function(...args) {
    let now = new Date() - 0;
    // 当次运行的时间和上一次时间的差值，超过500ms运行，否则不运行
    if (now - lastDate < delay) {
      return;
    }
    // 迭代上一次运行时间
    lastDate = now;
    fn.call(null, ...args);
  };
}

实现逻辑

// 1. 普通的函数
function print() {
  console.log(new Date());
}


let delay = 1000;
let lastDate = 0;

function print1() {
  let now = new Date() - 0;
  if (now - lastDate < delay) {
    return;
  }
  lastDate = now;
}
print1();
print1();

// 2. 相关内容封装
var print2 = (function() {
  let delay = 1000;
  let lastDate = 0;

  return function() {
    let now = new Date() - 0;
    if (now - lastDate < delay) {
      return;
    }
    lastDate = now;
    console.log(new Date());
  };
})();
print2();
print2();

// 3. 提取参数
var print3 = function(fn, delay = 1000) {
  let lastDate = 0;

  return function() {
    let now = new Date() - 0;
    if (now - lastDate < delay) {
      return;
    }
    lastDate = now;
    fn.apply(null, arguments);
  };
};
function print() {
  console.log(new Date());
}
let print3Demo = print3(print, 1000);
print3Demo();
print3Demo();

// 4. 再抽象一层
function throttle(fn, delay = 500) {
  let lastDate = 0;
  return function(...args) {
    let now = new Date() - 0;
    if (now - lastDate < delay) {
      return;
    }
    lastDate = now;
    fn.call(null, ...args);
  };
}
// es6
const throttle = (fn, delay = 500) => {
  let lastDate = 0
  return (...args) => {
    let now = new Date() - 0
    if (now - lastDate < delay) {
      return
    }
    lastDate = now
    fn(args)
  }
}

function print(name) {
  console.log(name, new Date());
}
var tprint = throttle(print, 100);

for (let i = 0; i < 10000000; i++) {
  tprint(1);
}

// 使用场景：
window.onresize = throttle(function() {
  console.log(1);
}, 500);

《JavaScript设计模式与开发实践》

本文主要在看《JavaScript设计模式与开发实践》，再进行总结的，作者写的很棒，作者写的throttle。

// throttle 函数的原理是，将即将被执行的函数用 setTimeout 延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求。throttle 函数接受 2 个参数，第一个参数为需要被延迟执行的函数，第二个参数为延迟执行的时间。
var throttle = function(fn, interval) {
  var __self = fn, // 保存需要被延迟执行的函数引用
    timer, // 定时器
    firstTime = true; // 是否是第一次调用
  return function() {
    var args = arguments,
      __me = this;
    if (firstTime) {
      // 如果是第一次调用，不需延迟执行
      __self.apply(__me, args);
      return (firstTime = false);
    }
    if (timer) {
      // 如果定时器还在，说明前一次延迟执行还没有完成
      return false;
    }
    timer = setTimeout(function() {
      // 延迟一段时间执行
      clearTimeout(timer);
      timer = null;
      __self.apply(__me, args);
    }, interval || 500);
  };
};

window.onresize = throttle(function() {
  console.log(1);
}, 500);