前端优化之防抖和节流

函数防抖

概念：

函数防抖 是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

规则：

1. 未完成操作时不执行相关函数处理
2. 用户完成操作后，执行相关函数处理

实现：

		// 函数防抖的实现
        function debounce(fn, wait) {
            var timer = null;
            return function() {
                var context = this,
                args = arguments;
                // 如果此时存在定时器的话，则取消之前的定时器重新记时
                if (timer) {
                clearTimeout(timer);
                timer = null;
                }
                // 设置定时器，使事件间隔指定事件后执行
                timer = setTimeout(() => {
                fn.apply(context, args);
                }, wait);
            };
        }

函数节流

概念：

函数节流 是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。
举个常见的节流案例：我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应；当你首次点击后，函数会无视之后三秒的所有响应；三秒结束后，button 又恢复正常 click 响应功能，以此类推。
有什么用呢？通常，这类提交 button 的@click响应会给后端发送 api 请求，频繁的点击意味着频繁的请求（流量）——会给后端带来很大的压力；此外，这些回调请求返回后，往往会在前端响应其他事件（如刷新页面），可能导致页面不停的加载，影响用户体验。所以我们要给这个 button 添加节流函数，防止一些无意义的点击响应。

规则：

1. 在约定周期内，虽触发多次，只执行1次判断操作
2. 周期内的逻辑判断标志如果存在，则执行停止程序的执行

实现：

// 函数节流的实现;
function throttle(fn, delay) {
  var preTime = Date.now();

  return function() {
    var context = this,
      args = arguments,
      nowTime = Date.now();

    // 如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - preTime >= delay) {
      preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}

总结：

节流和防抖动技术，他们是 JS 闭包和高阶函数的现实应用。这两种技术都是为了过滤前端无意义的请求，提升用户体验。现实开发中我们一般就直接使用三方库了，但是原生的可以帮助你学习，也还是不错的。