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事件),滚动 ...
随机推荐
- python变量的引用,浅拷贝
python的变量是对象引用 l1和l2引用的相同的对象,所以会相互影响 元组不变的是引用的物理地址,如果引用的对象是可变的,那么远祖也会发生变化 但是t1[2]的id时钟没有发生变化 2 默认是浅拷 ...
- python+requests实现接口测试 - get与post请求使用(转载)
转自:http://www.cnblogs.com/nizhihong/p/6567928.html 简介:Requests 是用Python语言编写,基于 urllib,采用 Apache2 Lic ...
- Web前端性能杂记
前面说过,用户感受的响应时间是取决于诸多因素的,我们几乎不能得到真实的用户响应时间.对于Web应用前端性能的研究也不是为了准备得到一个响应时间,其性能一部分取决于Web服务器和应用服务器(下载资源,执 ...
- 曾经的UCOSii
首先记住一句话:实时操作系统,并非真的实时.操作系统必须有延时,一个系统执行好几个任务,实质是任务之间不停的切换,有延时才有切换任务的余地,如果没有.....应该都见识过卡机,任务切换不过来了 如果你 ...
- Usaco2012-2013 金组 题解 (暂缺Hill walk以及Figue eight)
https://files.cnblogs.com/files/Winniechen/usaco2012-2013.pdf 做的不是很好,还请见谅! 如果有什么疑问,可以QQ上找我. QQ号:1967 ...
- [Oracle]如果误删了某个数据文件,又没有被备份,能否恢复?
如果你有从这个数据文件创建之前,直到现在的,所有的ArchiveLog 和 Online REDO,是有可能进行恢复的. 执行: RMAN> restore datafile <filei ...
- python 23 种 设计模式
频率 所属类型 模式名称 模式 简单定义 5 创建型 Singleton 单件 保证一个类只有一个实例,并提供一个访问它的全局访问点. 4 创建型 Abstract Factory 抽象工厂 提供一个 ...
- 【LG4248】[AHOI2013]差异
[LG4248][AHOI2013]差异 题面 洛谷 题解 后缀数组版做法戳我 我们将原串\(reverse\),根据后缀自动机的性质,两个后缀的\(lcp\)一定是我们在反串后两个前缀的\(lca\ ...
- JS 获取每月有几周(每周五到周四算作一周)
原文地址:https://caochangkui.github.io/data-week/ 将每周五至周四算作一周,计算每月有几周,并获取到每周的起始时间. 日期格式化 Date.prototype. ...
- R语言学习 第一篇:变量和向量
R是向量化的语言,最突出的特点是对向量的运算不需要显式编写循环语句,它会自动地应用于向量的每一个元素.对象是R中存储数据的数据结构,存储在内存中,通过名称或符号访问.对象的名称由大小写字母.数字0-9 ...