通过返回闭包,来共用timer定时器,通过定时器的清除和设置来实现每次触发后重新计时。

/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  延迟时间,也就是阈值,单位是毫秒(ms)
*
* @return {Function}     返回一个“去弹跳”了的函数
*/
function debounce(fn, delay) {

  // 定时器,用来 setTimeout
  var timer

  // 返回一个函数,这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数,传递给 fn
    var context = this
    var args = arguments

    // 每次这个返回的函数被调用,就清除定时器,以保证不执行 fn
    clearTimeout(timer)

    // 当返回的函数被最后一次调用后(也就是用户停止了某个连续的操作),
    // 再过 delay 毫秒就执行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

debounce去弹跳的更多相关文章

  1. JavaScript 开发总结(一)

    数据类型:JavaScript定义的数据类型有字符串.数字.布尔.数组.对象.Null.Undefined,但typeof有区分可判别的数据分类是number.string.boolean.objec ...

  2. 函数去抖(debounce)与 函数节流(throttle)

    以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemove事件 3 ...

  3. debounce还是throttle(去抖和节流)

    debounce 去抖 我的理解很简单,比方说window.onscroll会疯狂触发handler,此时给它一个debounce(handler, delayTime). 就是不管你延时时间内触发了 ...

  4. Debounce 和 Throttle 的原理及实现---防止频繁触发某事件

    原文:http://blog.csdn.net/redtopic/article/details/69396722 在处理诸如 resize.scroll.mousemove 和 keydown/ke ...

  5. Debounce 和 Throttle【转载】

    在处理诸如 resize.scroll.mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有 ...

  6. 关于Js debounce 函数小结

    一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...

  7. 白话debounce和throttle

    遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...

  8. throttle/debounce: 为你的cpu减减压(前端性能优化)

    何为throttle, 何为debounce? 谷歌翻译给出的意思:throttle 掐死???   debounce 去抖 好吧,按理解我们习惯翻译成 ——节流. 那么在什么场景下需要用到? 场景一 ...

  9. javascript中的函数节流和函数去抖

    带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...

随机推荐

  1. chromium 34以后中文字体粗体渲染问题

    估计不少人更新后都遇到这个情况了吧,粗体渲染如然变得很模糊,很奇怪,Google下说是字体实现方式变了,国内一些网站用的中文字体都是宋体,但是宋体本身没有粗体,Win下的粗体是微软自己通过某种方式实现 ...

  2. 开源纯C#工控网关+组态软件(四)上下位机通讯原理

    一.   网关的功能:承上启下 最近有点忙,更新慢了.感谢园友们给予的支持,现在github上已经有.目标是最好的开源组态,看来又近一步^^ 之前有提到网关是物联网的关键环节,它的作用就是承上启下. ...

  3. Java基础笔记5

    方法(函数) 就是一块可以重复调用的代码块. 比如.100行代码. 在多处使用. 方法的格式 public static 返回类型 方法名称(参数列表){ } 返回类型:当方法被调用时,把返回内容 交 ...

  4. 数据分析与展示——NumPy库入门

    这是我学习北京理工大学嵩天老师的<Python数据分析与展示>课程的笔记.嵩老师的课程重点突出.层次分明,在这里特别感谢嵩老师的精彩讲解. NumPy库入门 数据的维度 维度是一组数据的组 ...

  5. [Bayesian] “我是bayesian我怕谁”系列 - Variational Inference

    涉及的领域可能有些生僻,骗不了大家点赞.但毕竟是人工智能的主流技术,在园子却成了非主流. 不可否认的是:乃值钱的技术,提高身价的技术,改变世界观的技术. 关于变分,通常的课本思路是: GMM --&g ...

  6. SpringMVC自定义配置消息转换器踩坑总结

    问题描述 最近在开发时候碰到一个问题,springmvc页面向后台传数据的时候,通常我是这样处理的,在前台把数据打成一个json,在后台接口中使用@requestbody定义一个对象来接收,但是这次数 ...

  7. #define is unsafe

    #define is unsafe Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...

  8. 启动hadoop的命令

    start-all.sh 启动所有的Hadoop守护进程.包括NameNode. Secondary NameNode.DataNode.JobTracker. TaskTrack  stop-all ...

  9. C# Post和Get请求

    Get请求: /// <summary> /// 调用ToxyzAPI /// </summary> /// <param name="requetid&quo ...

  10. 【Kafka源码】SocketServer启动过程

    SocketServer主要用于接收外部的网络请求,并把请求添加到请求队列中. 一.入口 在KafkaServer.scala中的start方法中,有这样的入口: socketServer = new ...