js之节流函数

节流

原理

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

实现

时间戳实现

注意:第一次事件会被触发,最后一次不会触发函数

throttle.js

function throttle(func, wait) {
  let _this, args;
  // 之前的时间戳
  let old = 0;
  return function () {
    // 保存this
    _this = this;
    //保存arguments
    args = arguments;

    // 获取当前时间戳
    let now = new Date().valueOf();
    if (now - old > wait) {
      // 立即执行
      func.apply(_this, args);
      lod = now;

    }
  }
}

注意和防抖函数进行区分

定时器实现

第一次不会被触发,最后一次会触发

function throttle(func, wait) {
  let _this, args, timeout;
  return function () {
    _this = this;
    args = arguments;

    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(_this, args);
      }, wait)
    }
  }
}

节流进阶

原生的节流函数有第三个参数,用于控制是否首次事件是否被立即调用,以及最后一次事件是否被调用

 container.onmousemove = _.throttle(doThrottle, 1000, {
      leading: false,   //是否立即执行
      trailing: true     //最后一次是否执行
      //两者不能同为false,否则就会产生bug,会导致触发事件立即执行一次后就失效了!
    })

实现

function throttle(func, wait, options) {
  let _this, args, timeout;
  let old = 0;     //时间戳
  //如果没有options就将其设置为空对象
  if (!options) options = {};

  let later = function () {
    old = new Date().valueOf();
    timeout = null;
    func.apply(_this, args);
  }
  return function () {
    _this = this;
    args = arguments;
    let now = new Date().valueOf();
    if (options.leading === false && !old) {
      old = now;
    }
    if (now - old > wait) {
      // 第一次直接执行
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      func.apply(_this, args);
      old = now;
    } else if (!timeout && options.trailing !== false) {
      //最后一次也被执行
      timeout = setTimeout(later, wait)
    }
  }
}

测试:

function doThrottle(e) {
      container.innerHTML = count++
    }
 container.onmousemove = throttle(doThrottle, 1000,{
      leading:false,
      trailing:true
    });

应用场景

  1. DOM元素的拖拽功能的实现
  2. 射击游戏中的每隔一段时间射击
  3. 计算鼠标移动的距离
  4. 监听scroll滚动事件
  5. 搜索联想
  6. 高频点击提交,表单重复提交

防抖节流之间的异同比较

  1. 相同:

    • 都可以通过setTimeout实现
    • 目的都是:降低回调执行频率,节省计算资源
  2. 不同:

    • 函数防抖: 在一段连续操作结束后,处理回调,利用clearTimeout和setTimeout实现.
    • 函数节流:在一段连续操作中,每一段时间只执行一次,频率较高的时间中使用来提高性能.
    • 函数防抖关注一定时间连续触发的事件只在最后执行,而函数节流侧重于一段时间内只执行一次!

完整代码以及测试用例已上传GitHub,其中index.html为测试文件,throttle.js为节流函数,debounce.js为防抖函数

上一篇:js之防抖函数

相关推荐
<p> 课程演示环境:Windows10  </p> <p> 需要学习<span>Ubuntus</span>系统<span>YOLOv4-tiny</span>的同学请前往《<span>YOLOv4-tiny</span>目标检测实战:训练自己的数据集》 <span></span> </p> <p> <span> </span> </p> <p> <span style="color:#E53333;">YOLOv4-tiny</span><span style="color:#E53333;">来了!速度大幅提升!</span><span></span> </p> <p> <span> </span> </p> <p> <span>YOLOv4-tiny</span>在<span>COCO</span>上的性能可达到:<span>40.2% AP50, 371 FPS (GTX 1080 Ti)</span>。相较于<span>YOLOv3-tiny</span>,<span>AP</span>和<span>FPS</span>的性能有巨大提升。并且,<span>YOLOv4-tiny</span>的权重文件只有<span>23MB</span>,适合在移动端、嵌入式设备、边缘计算设备上部署。<span></span> </p> <p> <span> </span> </p> <p> 本课程将手把手地教大家使用<span>labelImg</span>标注和使用<span>YOLOv4-tiny</span>训练自己的数据集。课程实战分为两个项目:单目标检测(足球目标检测)和多目标检测(足球和梅西同时检测)。<span></span> </p> <p> <span> </span> </p> <p> 本课程的<span>YOLOv4-tiny</span>使用<span>AlexAB/darknet</span>,在<span>Windows10</span>系统上做项目演示。包括:<span>YOLOv4-tiny</span>的网络结构、安装<span>YOLOv4-tiny</span>、标注自己的数据集、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计<span>(mAP</span>计算<span>)</span>和先验框聚类分析。 <span> </span> </p> <p> <span> </span> </p> <p> 除本课程《<span>Windows</span>版<span>YOLOv4-tiny</span>目标检测实战:训练自己的数据集》外,本人推出了有关<span>YOLOv4</span>目标检测的系列课程。请持续关注该系列的其它视频课程,包括:<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:训练自己的数据集》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:人脸口罩佩戴识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:中国交通标志识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测:原理与源码解析》<span></span> </p> <p> <span> <img alt="" src="https://img-bss.csdnimg.cn/202007061503586145.jpg" /></span> </p> <p> <span><img alt="" src="https://img-bss.csdnimg.cn/202007061504169339.jpg" /><br /> </span> </p>
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页