js 节流函数封装示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>节流函数示例</title>
  <div
    style="width: 400px;height: 400px;background-color: red;font-size: 30px; text-align: center; line-height: 200px;">
  </div>
</head>

<body>

  <script>

    const throttle = function (fn, delay) {
      let timer = null;
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
          }, delay);
        }
      };
    };
    const test = function (name) {
      let count = 0;
      return throttle(function () {
        document.querySelector('div').innerHTML = name + count++;
      }, 400);
    };


    document.querySelector('div').addEventListener('mousemove', test('张三'))

  </script>

</body>

</html>

可能存在的难点:为什么返回一个function? 答:因为入参是个fn,你得把返回值也写成一个函数。
为什么清除定时器要用timer=null,不用clearTimeout?答:因为清除定时器的时机是三秒后,只能写在定时器内,而clearTimeout只能定时器外部调用,所以用null。

你可能感兴趣的:(javascript,开发语言,ecmascript)