节流函数-throttle

Posted 好_快

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了节流函数-throttle相关的知识,希望对你有一定的参考价值。

1. 功能 throttle

和防抖一样都是减少高频率执行代码的执行频率。

2.使用场景

  • oninput
  • onresize
  • onscroll
  • onmousemove
  • onmousehover
  • 等等

3.节流 vs 防抖

  • 防抖:高频执行函数,降低到执行1次
  • 节流:高频执行函数,降低到执行n次,1 < n < 高频次数

3.节流原理

3.1 利用 setTimeout 延迟执行逻辑代码。在防抖的基础上添加变量,降低 clearTimeout 频率,增加执行次数。

  let timer = null;
  let flag = true;
  element2.onmousemove = (event) => 
    if (flag === false) 
      return;
    
    flag = false;

    if (timer) 
      window.clearTimeout(timer);
    
    timer = setTimeout(() => 
      flag = true;
      console.log("防抖版本--发送网络请求:", event.target.value);
    , 1000);
  ;

3.2 封装工具函数

  function throttle(fun, delay = 500) 
    let timer = null;
    let flag = true;

    return function () 
      if (flag === false) 
        return;
      
      flag = false;
      if (timer) 
        window.clearTimeout(timer);
      
      timer = setTimeout(() => 
        flag = true;
        //无法传递event参数
        // fun();
        fun.apply(this, arguments);
      , delay);
    ;
  

代码链接

以上是关于节流函数-throttle的主要内容,如果未能解决你的问题,请参考以下文章

函数节流(throttle)

函数节流 throttle

javascript函数节流(throttle)与函数去抖(debounce)

简单的节流函数throttle

JS 节流函数(throttle)与防抖函数(debounce)

43.Vue中使用Lodash 节流(throttle)和防抖(debounce)函数