函数节流

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

<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、防止高频点击提交、防止表单重复提交;

posted @ 2020-02-19 18:38  古怪精灵  阅读(98)  评论(0编辑  收藏  举报