精简的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 ...
随机推荐
- 校园网搭建HUSTOJ记录
上学期和网管中心的老师说过很多次--要在校园网上搭OJ,当时那边老师说要等"虚拟化搞好了以后才能搭".直到上周,终于在校园网上申请到了一个虚拟主机,4核,10G内存,100G硬盘, ...
- mysql 在windows下,使用 net start mysql 命令发生错误 服务名无效 或 1067
mysql 在windows下,使用 net start mysql 命令发生错误 :服务名无效 或 1067 先使用mysqld -install安装一下 删除data目录下的日志等文件(因为之前 ...
- ORACLE简单触发器
因工作需要,尝试写一些建议的触发器,下面为其中一例. //创建一个名为TRG_FIN_OPB_ACCOUNTCARD的触发器 create or replace trigger TRG_FIN_OPB ...
- 实现tableview的下拉刷新
实现tableview的下拉刷新 推荐第三方下拉刷新代码http://code4app.com/ios/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90%E4%B8%8B%E6 ...
- Spring+SpringMvc+Mybatis框架集成搭建教程二(依赖配置及框架整合)
依赖导入以及框架整合 (1).打开项目的pom.xml文件,声明依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...
- iOS开发UI篇—核心动画(UIView封装动画)
iOS开发UI篇—核心动画(UIView封装动画) 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画 ...
- LeetCode之226. Invert Binary Tree
------------------------------------- 反转树的基本操作. 可是下面那句话是什么鬼啊,这么牛掰的人都会有这种遭遇,确实抚慰了一点最近面试被拒的忧伤..... AC代 ...
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- Python 中xrange和range区别
先看看Python help()的说明 help(range) Help on built-in function range in module __builtin__: range(...) ra ...
- 这两年在QQGame写过的游戏(2012.7.15-2014.8.25)
[雷电] Gamebryo http://qqgamecdnimg.qq.com/help/rule177.html [英雄杀] http://yxs.qq.com ...