防抖、节流含义及其手写实现

防抖、节流含义及其手写实现

​ 函数防抖和函数节流：是优化高频率执行Javscript代码的一种手段，js中的一些事件，如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

一、防抖

1. 含义：

   在一段固定的时间内，只能触发一次函数，若事件再次被触发，则重新计时，多次触发事件，只执行最后一次。（例如：登录、发短信等按钮为了避免用户点击太快，以至于发送了多次请求）…这举例应该恰当吧 ￣□￣｜｜

2. 作用：

   防止短时间内大量请求。（在规定时间间隔内再次发起请求，则重新计时）

3. 应用场景：

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

   • 搜索框搜索输入。（只需用户最后一次输入完，再发送请求）
   • 手机号、邮箱验证输入检测。

4. 手写实现：

   主要思路：已有计时器就清除计时器，创建一个新的计时器。

   fn为需要执行的回调函数，wait为计时器setTimeout的延迟执行时间（wait后执行fn）。

   function debounce(fn, wait) {
       var timer;						// 维护一个 timer
       return function () {			// 使用闭包来保证计时器变量不被内存释放。
           var _this = this;			// 取debounce执行作用域的this
           var args = arguments;		// 获取事件函数传递的对象参数
           if (timer) {				// 如果已有一个触发事件在事件队列中
               clearTimeout(timer);	// 则将其删除
           }
           timer = setTimeout(function () {	// 创建一个新的计时器
               fn.apply(_this, args);		// 改变内部this并传参
           }, wait);
       };
   }
   

   这里使用闭包的原因：解决传参和封装防抖函数的问题，这样就可以在其他地方随便将需要防抖的函数传入debounce了。

二、节流

1. 含义：

   在一段时间间隔内，只执行一次函数。（例如：一个点击事件被触发了，在这个n秒内，继续点击，疯狂点击，拼命点击都没用，必须等到过了这个n秒才行）

2. 作用：

   减少调取次数。（在一段固定时间间隔内仅执行一次）

3. 应用场景：

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

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

4. 手写实现：

   1. 定时器方法（常用）：

      function throttle(fn, wait) {
          var timer;
          return function () {
              var _this = this;
              var args = arguments;
              if (timer) {
                  return;
              }
              timer = setTimeout(function () {
                  fn.apply(_this, args);
                  timer = null;		// 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
              }, wait)
          }
      

   2. 时间戳方法：

      function throttle(fn, wait) {
          var previous = 0;		// 使用闭包返回一个函数并且用到闭包函数外面的变量previous
          return function() {
              var _this = this;
              var args = arguments;
              var now = new Date();
              if(now - previous > wait) {		//时间差大于等待时间，函数执行
                  fn.apply(_this, args);
                  previous = now;
              }
          }
      }
      

三、异同点

1. 相同点：

   • 都可以通过计时器setTimeout进行实现。
   • 目的都是降低回调频率，节省计算资源。（疯狂点击，频率太高，资源不就紧张了）

2. 不同点：

   • 防抖：侧重一定时间连续触发的事件只在最后执行一次。
   • 节流：侧重一段时间内只执行一次。

​