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 ...
随机推荐
- Tomcat 笔记-配置虚拟目录
,默认情况下,只有webapps下的目录才能被Tomcat自动管理成一个web站点,把web站点的目录分散到其他磁盘管理就需要配置虚拟目录.把web应用所在目录交给web服务器管理,这个过程称之为虚拟 ...
- JavaScript中的比较规则之“==”运算符
"=="运算符(两个操作数的类型不相同时) 如果一个值是null,另一个值是undefined,则它们相等 如果一个值是数字,另一个值是字符串,先将字符串转换为数学,然后使用转换后 ...
- RQPro 公募FOF策略实例——晨星基金筛选和风险平价配置
2017年9月8日,证监会公布首批公募FOF基金名单,标志着公募FOF产品正式落地.FOF(Fund of Funds)是一种通过投资基金,而非直接投资具体证券标的(股票或债券等)来实现分散化资产配置 ...
- iOS 之 protocol的相关问题
定义一个协议, 一个协议可以扩展子另一个协议 如果需要扩展多个协议中间使用逗号分隔 //定义一个协议 @protocol AnimalDelegate <NSObject, ***> @r ...
- octave中的一些基本操作
1.矩阵的表示:v = [1 2 2] %表示1行3列的矩阵 v = [1; 2; 2] %表示3行1列的矩阵 v = [1 2; 2 3; 4 5] %3*2矩阵 size(v) % 求v的行与列 ...
- windy数(数位DP)
windy数Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:165888KB 64bit I ...
- zookeeper详解
ZooKeeper 1.Zookeeper(***必须掌握***) 官方网址:http://zookeeper.apache.org/ Ø 什么是Zookeeper? l Zookeeper 是 G ...
- 统一addEventListener与attachEvent中this指向问题
1.this指向问题 使用addEventListener注册的事件,事件处理函数中 this指向目标元素: 使用attachEvent注册的事件,事件处理函数中 this指向window对象 要想将 ...
- javaSE基础
变量 1.变量就是数据存储空间的表示. 2.标识符命名规则:变量名=首字母+其余部分 ①首字母:字母.下划线.“$”符号(开头) ②其余部分:数字.字母.下划线“$” ③应避开关键字:int int ...
- Linux学习(二十)软件安装与卸载(三)源码包安装
一.概述 源码包安装的优点在于它自由程度比较高,可以指定目录与组件.再有,你要是能改源码也可以. 二.安装方法 步骤 1.从官网或者信任站点下载源码包 [root@localhost ~]# wget ...