问题定义

问题： 如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？
函数节流 throttle - 图1

问题描述

函数节流(throttle)

概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

参考代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. <script>
  13. /**
  14.  * throttle函数节流，返回一个被节流了的函数，使用闭包。
  15.  * 这个函数包含两个参数(fn, timeout), fn是被重复调用的函数，timeout是要节流的时间。
  16.  * 1. 第一次调用立即执行
  17.  * 2. 之后的调用在timeout之内则不执行，之外则执行
  18.  */
  20.  function throttle(fn, timeout) {
  22.   const _self = fn;
  23.   let firstTime = true;
  24.   let timer = null;
  26.   // 闭包
  27.   return function() {
  28.     const _me = this;
  29.     const args = arguments;
  31.     // 1. 判断是否是第一次调用
  32.     if (firstTime) {
  33.       _self.apply(_me, args);
  34.       firstTime = false;
  35.     }
  37.     // 如果有timer直接返回即可.
  38.     if(timer) {
  39.       return false;
  40.     }
  41.       // 2. timer记录是否有已经在做的调用，如果没有则用timeout调用
  42.     timer = setTimeout(function() {
  43.       clearTimeout(timeout);
  44.       timer = null;
  45.       _self.apply(_me, args);
  46.     }, timeout || 500);
  47.   }
  48. }
  50. window.onresize = throttle(function(){
  51.   console.log(1);
  52. }, 2000);
  55. </script>
  56. </html>

参考文章