函数节流

Posted 2021-03-09 ywnh

函数节流；

概述：限制一个函数再一定时间内只能执行一次；

<script>
    var throttle = function(func, delay) {
      // 初始化定时器的id；
      var timer = null
      // 定义开关属性
      var key = true
      return function() {
        // 第一次立即调用
        if (key) {
          func()
          key = false
        } else if (!timer) {
          // 若上次的定时器执行完毕则立即调用，否则不调用；
          timer = setTimeout(function() {
            func()
            timer = null
          }, delay)
        }
      }
    }

    // 要进行处理的函数； 
    function handle() {
      console.log(Math.random())
    }

    window.addEventListener('mousemove', throttle(handle, 1000))
  </script>

使用场景：

1、懒加载、滚动加载、加载更多、监听滚动条位置；

2、百度搜索框、搜索联想功能；

3、防止高频点击提交、防止表单重复提交；