专栏首页Angular&服务JS函数节流和函数防抖

JS函数节流和函数防抖

函数防抖:

function debounce(fn, wait) {
  var timer = null;
  return function () {
      var context = this
      var args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}
var fn = function () {
  console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发,之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次(我把函数防抖看出技能读条,如果读条没完成就用技能,便会失败而且重新读条)

之所以返回一个函数,因为防抖本身更像是一个函数修饰,所以就做了一次函数柯里化。里面也用到了闭包,闭包的变量是timer。

函数节流

function throttle(fn, gapTime) {
  let _lastTime = null;
  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn();
      _lastTime = _nowTime
    }
  }
}
let fn = ()=>{
  console.log('boom')
}
setInterval(throttle(fn,1000),10)

如图是实现的一个简单的函数节流,结果是一秒打出一次boom

小结 函数防抖和函数节流是在时间轴上控制函数的执行次数。防抖可以类比为电梯不断上乘客,节流可以看做幻灯片限制频率播放电影。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • angular采用注释进行文档编写

    先加载 Dgeni 所需要的包依赖。下一步,需要通过配置来告知dgeni如何生成我们的文档。

    用户1437675
  • homebrew安装下载文件报错解决方案

    如果brew install 工具时下载错误,可以直接从浏览器下载(或者迅雷下载),然后放到下面的目录就可以了。

    用户1437675
  • angular2关于内置通道的使用

    minIntegerDigits是要使用的最小数字的整数数字。 默认为1 minFractionDigits是分数后的最小位数。 默认为0 maxFra...

    用户1437675
  • cityEngine学习笔记(二)

    模型很简单,仅仅是将二维数据拉起来,屋顶也没做什么处理(ce本身支持好几种屋顶,后续应该能用到)。

    数据处理与分析
  • 如何避免死锁,我们有套路可循

    上一篇文章 共享资源那么多,如何用一把锁保护多个资源? 文章我们谈到了银行转账经典案例,其中有两个问题:

    黄泽杰
  • 如何避免死锁,我们有套路可循

    上一篇文章 共享资源那么多,如何用一把锁保护多个资源? 文章我们谈到了银行转账经典案例,其中有两个问题:

    用户4172423
  • csdn博客之星

    IT云清
  • 2013年十大热门国内科技公司

    纽约时报中文网1月13日首发 2013年对于中国科技行业来说是一个结合之年。软件和硬件、线上和线下、互联网和传统企业、PC(个人电脑)和移动互联网、传统...

    罗超频道
  • 数据即索引-大数据索引漫谈

    传统意义上的索引,目标是为了加快查询速度,但独立于数据,通常可以加载到内存,典型的比如B-Tree等。

    用户2936994
  • 大疆无人机被用来探测活火山,可预测火山喷发

    据美国《国际财经日报》21日报道,利用无人机直接探入火山口,科研人员可对火山活动有更好了解,从而在火山喷发前制订更优化的民众撤离计划。 这一科研小组来自德国约...

    机器人网

扫码关注云+社区

领取腾讯云代金券