精简的javascript下throttle和debounce代码
//频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs。立即执行
function throttle(waitMs, fn) {
var lastRun = 0;
return function () {
var now = +new Date;
if (now - lastRun > waitMs) {
lastRun = now;
fn.apply(null, arguments);
}
}
} //空闲控制 返回函数连续调用时,空闲时间必须大于或等于 waitMs,fn 才会执行。延迟执行
function debounce(waitMs, fn) {
var lastCall, args, timeout;
return function r() {
lastCall = +new Date;
args = arguments;
if (!timeout) {
timeout = setTimeout(later, waitMs);
}
}; function later() {
var past = +new Date - lastCall;
if (past > waitMs) {
timeout = null;
fn.apply(null, args)
}
else {
timeout = setTimeout(later, waitMs - past + 1)
}
}
} 调用方法如下:
$(window).resize(debounce(100, function(evt){
......
}));
$(document).mousemove(throttle(40, function(evt){
......
}));
精简的javascript下throttle和debounce代码的更多相关文章
- [JavaScript] 节流(throttle)-防抖(debounce) 不懵圈指北
网易云课堂 > 微专业 > 前端高级开发工程师 01.前端高级-JavaScript进阶 > 3.函数式编程 Underscore源码分析 > 3.4.3 throttle 与 ...
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- 试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别
问题的引出 看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题. 在很多应用中,我们需要控制函数执行的频率, 例如 窗口的 resize,窗口的 scroll 等操作,事件触发的频率非常高 ...
- C#.Net下的防抖-Debounce和节流阀-Throttle功能实现
C#下的防抖-Debounce.节流阀-Throttle功能实现 防抖-Debounce 连续的多次调用,只有在调用停止之后的一段时间内不再调用,然后才执行一次处理过程. 节流阀-Throttle 连 ...
- javascript中的throttle和debounce
throttle 我们这里说的throttle就是函数节流的意思.再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制.主要应用的场景比如: 1.鼠标移动,mousemove 事件2.DOM ...
- 一些精简的JavaScript代码集合
日历 创建过去七天的数组,如果将代码中的减号换成加号,你将得到未来7天的数组集合 // 创建过去七天的数组 [...Array(7).keys()].map(days => new Date(D ...
- 【 js 性能优化】throttle 与 debounce 节流
在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...
- 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流
在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...
- throttle和debounce
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
随机推荐
- ecplise 常用快捷键
/* * alt+/ * * A:main * main+alt+/ * B:输出语句 * syso+alt+/ * C:提示作用 * * */ /* * 常用快捷键 * 1.格式化:ctrl+shi ...
- java9
1:StringBuffer(掌握) (1)用字符串做拼接,比较耗时并且也耗内存,而这种拼接操作又是比较常见的,为了解决这个问题,Java就提供了 一个字符串缓冲区类.StringBuffer供我们使 ...
- windows7 安装PHP7 本地网站搭建
2016年5月21日 18:21:12 星期六 PHP7用了vc14编译的, 因此windows要下载安装一个vc14的发行包, 只有16M 2016年6月1日 23:23:52 星期三 利用PHP自 ...
- mplayer-1.3.0-2016-09-01.7z
鼠标右键 快速定位 左SHIFT 记录开始时间 左CTRL 记录结束时间 右CTRL 复制开始结束时间 00:00:00.000 00:00:00.000 右SHIFT 生成视频剪切命令保存到 _cu ...
- HDU 4859 海岸线(最大流最小割)
难得的中文题,就不翻译了. 输入第一行为T,表示有T组测试数据.每组数据以两个整数N和M开始,表示地图的规模.接下来的N行,每一行包含一个长度为M的字符串,表示地图,‘.’表示陆地,’E’表示浅海域, ...
- VC++ 制作一个简易的控制台时钟应用
1.下载EasyX Library for C++ (http://www.easyx.cn/) 直接下载:EasyX_20151015(beta) EasyX 绘图库目前支持 Visual C++ ...
- .NET 多线程
多线程 在一个程序中,这些独立运行的程序片断叫作“线程”(Thread),利用它编程的概念就叫作“多线程处理”.多线程处理一个常见的例子就是用户界面.利用线程,用户可按下一个按钮,然后程序会立即作出响 ...
- Core Data使用
注意:每次修改CoreData的Attribute时记得把应用给删除重装,要不会崩,因为建立的数据库文件还在该目录下,里面的字段没有更改,所以不能匹配就会崩溃,切忌,要不就每次进来把文件先删除,再建立 ...
- 最小生成树的Kruskal算法实现
最近在复习数据结构,所以想起了之前做的一个最小生成树算法.用Kruskal算法实现的,结合堆排序可以复习回顾数据结构.现在写出来与大家分享. 最小生成树算法思想:书上说的是在一给定的无向图G = (V ...
- HDU 3015 Disharmony Trees(树状数组)
题意:给你n棵树,每棵树上有两个权值X H 对于X离散化 :3 7 1 5 3 6 -> 2 6 1 4 2 5,对于H一样 然后F = abs(X1-X2) S=min(H1,H2) 求出 ...