JS频率控制函数
/**
* 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次
* @param {Function} fn 需要调用的函数
* @param {Number} delay 延迟时间,单位毫秒
* @param {Boolean} immediate 给immediate参数传递false绑定的函数先执行,而不是delay后后执行。
* @param {Boolean} debounce 是否使用debounce
* @return {Function} 实际调用函数
*/
var throttle = function(fn, delay, immediate, debounce) {
var curr = +new Date(), //当前事件
last_call = 0,
last_exec = 0,
timer = null,
diff, //时间差
context, //上下文
args,
exec = function() {
last_exec = curr;
fn.apply(context, args);
};
return function() {
curr = +new Date();
context = this,
args = arguments,
diff = curr - (debounce ? last_call : last_exec) - delay;
clearTimeout(timer);
if (debounce) {
if (immediate) {
timer = setTimeout(exec, delay);
} else if (diff >= 0) {
exec();
}
} else {
if (diff >= 0) {
exec();
} else if (immediate) {
timer = setTimeout(exec, -diff);
}
}
last_call = curr;
}
}; /**
* 空闲控制 返回函数连续调用时,空闲时间必须大于或等于delay,fn才会执行
* @param {Function} fn 要调用的函数
* @param {Number} delay 空闲时间
* @param {Boolean} immediate 给immediate参数传递false绑定的函数先执行,而不是delay后执行。
* @return {Function} 实际调用函数
*/
var debounce = function(fn, delay, immediate) {
return throttle(fn, delay, immediate, true);
}
JS频率控制函数的更多相关文章
- 试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别
问题的引出 看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题. 在很多应用中,我们需要控制函数执行的频率, 例如 窗口的 resize,窗口的 scroll 等操作,事件触发的频率非常高 ...
- Javascript中 节流函数 throttle 与 防抖函数 debounce
问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...
- REST-framework快速构建API--频率
前面已经了解了API的认证和授权.认证,是对资源访问者的第一道门,必须有钥匙,你才能进来拿我的资源:授权,是对资源访问者的第二道门,虽然你进来了,但是你可以拿走什么资源,还是我说了算,就是授权. 当然 ...
- Code-NFine:NFine权限控制
ylbtech-Code-NFine:NFine权限控制 1.返回顶部 1. NFine框架研究 1.前台业务操作 1.1 系统菜单配置方法 1.2 菜单管理配置方法 1.2.1 按钮管理 1.2.2 ...
- js禁止高频率连续点击思路
1.类似react的数据流,点击之后立即设置值为空,当返回值后才可以点击 2.设置定时器,每次进入之前先清空掉定时器,然后开启定时器 <main> <div id="me& ...
- JS控制函数执行次数(可带参数)
//真正要执行的函数 var sayHi = function () { console.log('Hi'); }; //控制器 var timer = function (fn, num) { fo ...
- (1)Underscore.js入门
1. Underscore对象封装 Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文中称"Undersco ...
- JS 之高级函数
作用域安全的构造函数 当使用new调用构造函数时,构造函数内部this对象会指向新创建的对象实例.如果不使用new,直接调用的话,则this对象会映射到window对象上.所以需要判断下. eg: f ...
- 也谈js函数节流
1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...
随机推荐
- .NET批量操作窗口样式
1. 背景 我们在开发过程中,可能会遇到需要批量控制程序中窗体的大小或其它一些操作, 这些窗体有可能是属于程序本身的,也许是其它程序的窗口.本文就是基于此的一篇关于如何批量操作窗口样式的,我们主要是通 ...
- easyui combotree combobox 使用例子
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- C++之new和delete操作符
在C语言中的动态分配和释放内存的函数是malloc calloc 和 free , 而在C++中要用 new new[] delete delete[] 来申请动态空间和释放空间. 注意:的是new. ...
- oracle 在存储过程或函数中得到异常sql
BEGIN SQLSTR := 'UPDATE TBL ...'; EXECUTE IMMEDIATE SQLSTR; EXCEPTION WHEN OTHERS INSERT INTO LOG_TA ...
- React Native创建一个APP
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽 ...
- SSIS ->> Excel Destination无法接受大于255个字符长度的字符字段
从下文的链接中找到一些背景,因为Excel会以前8行作为参考,如果某个字段前8行的最长长度没有超过255个字符,就会报错.如果知道某个字段属于描述性字段,而且字段的数据长度很可能超过255个字符长度, ...
- NLB网路负载均衡管理器详解(转载)
序言 在上一篇配置iis负载均衡中我们使用啦微软的ARR,我在那篇文章也中提到了网站的高可用性,但是ARR只能做请求入口的消息分发服务,这样如果我们的消息分发服务器给down掉啦,那么做再多的应用服务 ...
- intellij idea新建maven项目,一直loading archetype list.....
不知道什么时候开始,在idea里新建maven项目时,在new module页面,一直显示loading archetype list....,导致一直没办法新建.后来我以为是防火墙问题,各种设置还是 ...
- [Zlib]_[初级]_[使用zlib库压缩和解压STL string]
场景 1.一般在使用文本json传输数据, 数据量特别大时,传输的过程就特别耗时, 因为带宽或者socket的缓存是有限制的, 数据量越大, 传输时间就越长. 网站一般使用gzip来压缩成二进制. 说 ...
- Google是如何教会机器玩Atari游戏的
转自:http://blog.csdn.net/revolver/article/details/50177219 今年上半年(2015年2月),Google在Nature上发表了一篇论文:Human ...