debounce去弹跳
通过返回闭包,来共用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去弹跳的更多相关文章
- JavaScript 开发总结(一)
数据类型:JavaScript定义的数据类型有字符串.数字.布尔.数组.对象.Null.Undefined,但typeof有区分可判别的数据分类是number.string.boolean.objec ...
- 函数去抖(debounce)与 函数节流(throttle)
以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemove事件 3 ...
- debounce还是throttle(去抖和节流)
debounce 去抖 我的理解很简单,比方说window.onscroll会疯狂触发handler,此时给它一个debounce(handler, delayTime). 就是不管你延时时间内触发了 ...
- Debounce 和 Throttle 的原理及实现---防止频繁触发某事件
原文:http://blog.csdn.net/redtopic/article/details/69396722 在处理诸如 resize.scroll.mousemove 和 keydown/ke ...
- Debounce 和 Throttle【转载】
在处理诸如 resize.scroll.mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有 ...
- 关于Js debounce 函数小结
一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...
- 白话debounce和throttle
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
- throttle/debounce: 为你的cpu减减压(前端性能优化)
何为throttle, 何为debounce? 谷歌翻译给出的意思:throttle 掐死??? debounce 去抖 好吧,按理解我们习惯翻译成 ——节流. 那么在什么场景下需要用到? 场景一 ...
- javascript中的函数节流和函数去抖
带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...
随机推荐
- (转)[疯狂Java]NIO:Channel的map映射
原文出自:http://blog.csdn.net/lirx_tech/article/details/51396268 1. 通道映射技术: 1) 其实就是一种快速读写技术,它将通道所连接的数据节点 ...
- MapReduce-实践1
MR进阶实践1: -file 分发多个文件 [-file 适合场景]分发文件在本地,小文件 -file分发原理 run.sh文件: 通过多个-file, 将多个本地文件分发到Ha ...
- C++数组做参数
首先,看一下下面这段代码: void changearr(int a[],int n){ cout<<sizeof(a)<<endl; // 输出4}in ...
- 史上最简单的MySQL安装教程之Linux(CentOS6.8)下安装MySQL5.6
一.准备 安装包:Percona-Server-5.6.21-70.0-r688-el6-x86_64-bundle.tar MySQL下载地址:http://www.percona.com/doc/ ...
- TensorFlow Object Detection API(Windows下训练)
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 最近事情比较多,前面坑挖的有点久,今天终于有时间总结一下,顺便把Windows下训练跑通.Li ...
- Hibernate映射类型
- C#中判断语句 if、if-else if、switch-case
1.if一般用于一个条件的判断: 2.if-else if 一般用于多个条件的判断: 3.switch-case一般用于多个条件的判断. 注:if-else if与switch-case的区别在于:一 ...
- 用Python从零开始创建区块链
本文主要内容翻译自Learn Blockchains by Building One 本文原始链接,转载请注明出处. 作者认为最快的学习区块链的方式是自己创建一个,本文就跟随作者用Python来创建一 ...
- ajax+php(环境搭建+测试)
在学习JavaScript,jQuery的ajax部分的时候,一直不明白要如何进行,不知道服务器要怎么弄,什么都不知道,当初在学ajax的时候,除了看一下ajax的内容,实践极少,因为,不知道要怎么做 ...
- [Bayesian] “我是bayesian我怕谁”系列 - Markov and Hidden Markov Models
循序渐进的学习步骤是: Markov Chain --> Hidden Markov Chain --> Kalman Filter --> Particle Filter Mark ...