通过返回闭包,来共用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. Java限流策略

    概要 在大数据量高并发访问时,经常会出现服务或接口面对暴涨的请求而不可用的情况,甚至引发连锁反映导致整个系统崩溃.此时你需要使用的技术手段之一就是限流,当请求达到一定的并发数或速率,就进行等待.排队. ...

  2. .NET之父 - Anders Hejlsberg

    简介 安德斯·海尔斯伯格(Anders Hejlsberg,1960.12~),丹麦人,Turbo Pascal编译器的主要作者,Delphi和.NET之父! 安德斯·海尔斯伯格曾在丹麦技术大学学习工 ...

  3. LeetCode 15. 3Sum(三数之和)

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  4. nginx + tomcat + redis 部署项目,解决session共享问题。

    最近自己搭了一套nginx的环境,集群部署了公司的一个项目,中间解决了session共享的问题.记录如下,以备日后查看. 1.环境 windows10 家庭中文版,jdk 7, tomcat 7.0. ...

  5. datagrid参数queryParams--easyUI

    datagrid参数queryParams--easyUI Html          <div  region="center" border="false&qu ...

  6. ABAP开发实用快捷键

    在程序中注释代码往往受输入法影响,看了别人的一篇博客,结合自己的测试发现用如下方法可以直接注释源代码不受输入法影响 添加注释:ctrl + space + < 去掉注释:ctrl + space ...

  7. myeclipse+tomcat中出现org.apache.juli.logging.LogFactory这样的错误[转]

      将项目部署好后,启动tomcat后报错,java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory 报这个错说明你用的是t ...

  8. 使用canvas实现环形进度条

    html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. Java 数据结构与算法分析学习

    由于之前面试android的时候考到了很多关于java的知识,所以这次重温数据结构知识就打算用java来学习,毕竟android是以java为基础的,而且我现在学习的j2ee架构也是以java为基础的 ...

  10. HTTP协议相关知识点

    主要参考 http://www.imooc.com/article/14397,来源:慕课网,作者种子_fe HTTP是超文本传输协议,主要特点有: 支持客户.服务器模式 简单快速:客户向服务器请求服 ...