/**
* 频率控制 返回函数连续调用时,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频率控制函数的更多相关文章

  1. 试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别

    问题的引出 看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题. 在很多应用中,我们需要控制函数执行的频率, 例如 窗口的 resize,窗口的 scroll 等操作,事件触发的频率非常高 ...

  2. Javascript中 节流函数 throttle 与 防抖函数 debounce

    问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的 ...

  3. REST-framework快速构建API--频率

    前面已经了解了API的认证和授权.认证,是对资源访问者的第一道门,必须有钥匙,你才能进来拿我的资源:授权,是对资源访问者的第二道门,虽然你进来了,但是你可以拿走什么资源,还是我说了算,就是授权. 当然 ...

  4. Code-NFine:NFine权限控制

    ylbtech-Code-NFine:NFine权限控制 1.返回顶部 1. NFine框架研究 1.前台业务操作 1.1 系统菜单配置方法 1.2 菜单管理配置方法 1.2.1 按钮管理 1.2.2 ...

  5. js禁止高频率连续点击思路

    1.类似react的数据流,点击之后立即设置值为空,当返回值后才可以点击 2.设置定时器,每次进入之前先清空掉定时器,然后开启定时器 <main> <div id="me& ...

  6. JS控制函数执行次数(可带参数)

    //真正要执行的函数 var sayHi = function () { console.log('Hi'); }; //控制器 var timer = function (fn, num) { fo ...

  7. (1)Underscore.js入门

    1. Underscore对象封装 Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文中称"Undersco ...

  8. JS 之高级函数

    作用域安全的构造函数 当使用new调用构造函数时,构造函数内部this对象会指向新创建的对象实例.如果不使用new,直接调用的话,则this对象会映射到window对象上.所以需要判断下. eg: f ...

  9. 也谈js函数节流

    1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...

随机推荐

  1. 解决IDEA因分配内存而引起的卡顿

    解决IDEA分配内存不足引起卡顿的问题 在使用IDEA的过程中,经常会运行一段时间后程序卡顿.一段代码可能要敲很久或者出现死机状态,严重影响代码书写速度.经查阅资料,IDEA的自动分配内存最大只有75 ...

  2. Android使用AsyncTask设置请求超时的注意事项

    备注:该篇文章为原创,转载请声明地址,谢谢! /** * AsyncTaskTools2集成了AsyncTask类 * 前三个参数为回到函数,最后一个为全局的Context */ final Asyn ...

  3. linux 创建守护进程的相关知识

    linux 创建守护进程的相关知识 http://www.114390.com/article/46410.htm linux 创建守护进程的相关知识,这篇文章主要介绍了linux 创建守护进程的相关 ...

  4. golang postgresql CRUD

    package main import ( "database/sql" "fmt" "log" _ "github.com/li ...

  5. 代码段:js表单提交检测

    市面上当然有很多成型的框架,比如jquery的validation插件各种吧.现在工作地,由于前端童鞋也没用这些个插件.根据业务的要求,自己就在代码里写了个简单的表单提交的检测代码(php的也写了一个 ...

  6. Spring Boot和Dubbo整合

    provider端 POM依赖 <dependencies> <dependency> <groupId>org.springframework.boot</ ...

  7. 20155233 Exp1 PC平台逆向破解(5)M

    Exp1 PC平台逆向破解(5)M 实践一 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 步骤 1.cp pwn1 pwn20155233拷贝pwn1文件,命名为pwn201 ...

  8. [CF1060F]Shrinking Tree[树dp+组合计数]

    题意 你有一棵 \(n\) 个点的树,每次会随机选择树上的一条边,将两个端点 \(u,v\) 合并,新编号随机为 \(u,v\).问最后保留的编号分别为 \(1\) 到 \(n\) 的概率. \(n\ ...

  9. SQL Server 全文搜索

    SQL Server 的全文搜索(Full-Text Search)是基于分词的文本检索功能,依赖于全文索引.全文索引不同于传统的平衡树(B-Tree)索引和列存储索引,它是由数据表构成的,称作倒转索 ...

  10. effective c++ 笔记 (45-48)

    //#45   运用成员函数模版接受所有兼容类型 { /*  1:当你使用智能指针的时候,会发生一个问题,想把一个子类的对象赋给基类的指针变得不可能了, 因为智能指针指定了的是基类的类型,而赋给它的是 ...