setTimeout 和 throttle 那些事儿
document.querySelector('#settimeout').onclick= function () {
setTimeout(function () {
console.log('test settimeout');
},);
}
setTimeout 是延迟执行,它内部应该有一个队列结构,也就是当我们再1s内狂点100下按钮时候,上面的函数虽然会1执行以下,但这100下都会执行完,这会涉及到一个问题
比如当我们有一个小的图片,鼠标放上去时候就再1s后浮动显示出大图片,当鼠标移开则消失,如果用setTimeout,的话,结果你懂的~
所以我们需要把这1s内的多余事件给丢弃, 所以引出了 throttle
/**
* 频率控制 返回函数连续调用时,func 执行频率限定为 次 / wait
*
* @param {function} func 传入函数
* @param {number} wait 表示时间窗口的间隔
* @param {object} options 如果想忽略开始边界上的调用,传入{leading: false}。
* 如果想忽略结尾边界上的调用,传入{trailing: false}
* @return {function} 返回客户调用函数
*/
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
// 上次执行时间点
var previous = ;
if (!options) options = {};
// 延迟执行函数
var later = function() {
// 若设定了开始边界不执行选项,上次执行时间始终为0
previous = options.leading === false ? : _.now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = _.now();
// 首次执行时,如果设定了开始边界不执行选项,将上次执行时间设定为当前时间。
if (!previous && options.leading === false) previous = now;
// 延迟执行时间间隔
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 延迟时间间隔remaining小于等于0,表示上次执行至此所间隔时间已经超过一个时间窗口
// remaining大于时间窗口wait,表示客户端系统时间被调整过
if (remaining <= || remaining > wait) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
//如果延迟执行不存在,且没有设定结尾边界不执行选项
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};
这个函数咋用呢?如下
var s= ;
var thth= throttle(
function (a) {
s++;
console.log(s);
//return '测试结果';
},
,
{ leading:true, trailing:true}
);
document.querySelector('#throtol').onclick= function () {
thth('测试参数');
};
另外补充下 如果settimeout()时间为负数 则表示 立即执行 如下
document.querySelector('#settimeout').onclick= function () {
setTimeout(function () {
console.log('test settimeout');
},-);
}
再ps: 关于 if else 打印结果是什么你知道吗
document.querySelector('#settimeout').onclick= function () {
if(true){
console.log();
}else if(true){
console.log();
}else if(false){
console.log();
}else if(true){
console.log();
}
}
打印的只有111……基础知识啊………………
setTimeout 和 throttle 那些事儿的更多相关文章
- MVC与Validate验证提示的样式修改
MVC中使用Validate的验证,要修改错误提示样式一共有3处需要修改,否则就不太完美了: MVC中的Validate的验证机制只用在后台写一次,就可以完成前台和后台的完美验证,前台的验证主要是依靠 ...
- js实现图片(高度不确定)懒加载
最近一直在弄广告页,由于广告页几乎都是图片拼凑起来的,为了减少服务器压力和带宽,采用图片懒加载方式,但是我们的图片高度又不确定,所以我在网上下载了echo.js自己改了一下. 大体思路是:让首页先加载 ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
- JS图片赖加载例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- setTimeout那些事儿
一.setTimeout那些事儿之单线程 一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没——就是我们 ...
- throttle和debounce简单实现
function debounce(delay,fn){ var timer; return function(){ var ctx = this,args = arguments; clearTim ...
- setTimeout和setInterval的注意事项
精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...
- 精简的javascript下throttle和debounce代码
//频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs.立即执行1次 function throttle(fn, waitMs) { var lastRun = 0; return f ...
- JS魔法堂:函数节流(throttle)与函数去抖(debounce)
一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...
随机推荐
- 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架(前言)
一直希望能够搭建一个完整的,基础Web框架,方便日后接一些外快的时候,能够省时省力,终于花了一周的时间,把这个东西搞定了.特此写下此博客,一来是纪念,二来是希望能够为别人提供方便.顺带说一下,恩,组合 ...
- WEB基础原理——理论复习
基本WEB原理 1. Internet同Web的关系 1.1互联网 全世界最大的局域网. 来源美国国防部的项目用于数据共享 没有TCP/IP之前最开始只能1000台电脑通信(军用协议) 1.2 万维网 ...
- 写给自己:修改配置文件一定要cp一个.bak
写给自己:修改配置文件一定要cp一个.bak 毕竟不是每次的修改都一定对,而且很多时候是在服务器上直接修改原文件,修改后重启服务才知道是否修改正确,如果不加备份修改,造成服务器动荡,将会造成不可挽回的 ...
- hideSoftInputFromWindow
有的时候会碰到软键盘不好关闭,然后就去调界面代码,发现不行,说到底还是对软键盘不熟悉的原因,软键盘windowSoftInputMode有很多种 如果你默认的activity的模式为默认的,或者sta ...
- Android Weekly Notes Issue #218
Android Weekly Issue #218 August 14th, 2016 http://androidweekly.net/issues/issue-218 ARTICLES & ...
- [转]HttpModule的认识
HttpModule是向实现类提供模块初始化和处置事件.当一个HTTP请求到达HttpModule时,整个ASP.NET Framework系统还并没有对这个HTTP请求做任何处理,也就是说此时对于H ...
- Google C++单元测试框架GoogleTest---GMock的CheatSheet文档
CheatSheet文档中包含了GMock所有常用的东西,看了这个基本上就可以用它了,本文接上篇博文:Google C++单元测试框架GoogleTest---Google Mock简介--概念及基础 ...
- win7 64位下vs不能以管理员身份运行的问题解决
开发机上安装了VS6.0/2008/2010/2013,之前一直是正常的,突然莫名其妙不能以管理员身份运行(除了VS6),报"application cannot start.", ...
- AspNetPager 多条件分页查询
AspNetPager 这个分页控件一般做后台基本都知道的,我就不多说了(说明与下载链接:http://www.webdiyer.com/Controls/AspNetPager),嘿嘿!其实我也是刚 ...
- [python]set集合学习
python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交), difference(差)和 ...