关于setInterval(),setTimeout()使用:
在Web开发中,肯定会用到轮询,也即不停地以某个时间值去执行你想要执行的Function,也许你还想传参数,可是你会传吗?当你看到这两个方法只接受两个参数后,也许你就真的不知道应该怎么传额外的自己的参数了,这里直接看代码,很简洁、方便、易用的代码:
<div style="height: 100px;width: 200px;float: right;">
<button id="btn">Clear Timer</button>
</div>
<script type="text/javascript">
var timer = {
timers:{},
start:function(asyn,fun,delay,id){
if(typeof fun === "function"){
var args = Array.prototype.slice.call(arguments,4),t,func,_this = this;
func = function(args){
var ags = arguments;
if(!Array.isArray) {
Array.isArray = function (vArg) {
return Object.prototype.toString.call(vArg) === "[object Array]";
};
}
if(!Array.isArray(args))
ags = Array.prototype.slice.call(arguments,0)
else
ags = args;
fun.apply(null,ags);
if(asyn){
console.log("asynchronous timer");
_this.timers[id] = setInterval(function(){
fun.apply(null,ags);
},delay);
}else{
console.log("synchronous timer");
_this.timers[id] = setTimeout(function(){
func.apply(null,ags);
},delay);
}
};
setTimeout(func,delay,args);
}
},
clear:function(id){
clearTimeout(this.timers[id]);
clearInterval(this.timers[id]);
delete this.timers.id;
}
};
function f1(p){
console.log("f1() : param1 : "+p+" , param2 : "+arguments[1] + " , param3 : "+arguments[2] + " " + new Date());
}
//test
timer.start(true,f1,2000,"asyn","aa","bb","cc");
// timer.start(false,f1,2000,"asyn","aa","bb","cc");
$("#btn").click(function(){
$.each(timer.timers,function(k,v){
console.log("key : "+k+" , v : "+v);
})
timer.clear("asyn")
});
</script>
在timer.start()方法中,前4个参数是必需滴,第一个参数代表是否是异步,第二个参数代表你想要执行的function,第三个参数是时间间隔(几秒执行一次),第四个参数是给你的定时器指定一个标识(用来取消你所设置的定时器),第四个以后你可以随便传,想传多少传多少,根据需要,只要你传了就可以在你的目标方法里获取到,在这里是f1(),我已经测试过了,没有问题可以拿到值。
想来想去觉得还是有必要解释下异步和同步的区别:
异步(setInterval(fun,delay)):即不管你的目标方法在fun在指定的时间delay内是否执行完毕,当时间间隔达到delay,浏览器总会几乎(因为浏览器也不是很严格的,毕竟是秒啊,可能会相差个几十或者几百或者几千毫秒)按时去执行目标方法fun。
比如:1:00:00开始执行,间隔是2毫秒,则浏览器打印的是:
1:00:02
1:00:04
1:00:06
1:00:08
同步(setTimeout(fun,delay)):即如果你的目标方法在fun在指定的时间delay内没有执行完毕,当时间间隔达到delay,浏览器总是不会去执行目标方法fun,直到本次执行完毕,才会触发下一次.
比如:1:00:00开始执行,间隔是2毫秒,则浏览器打印的是:
1:00:02(第一次)
//执行你的代码的时间,视你的目标方法fun执行的时间长短而定,假如执行了10秒
1:00:14(第二次的时间就是第一次的时间+执行目标方法fun耗费的时间10秒+间隔2毫秒)
。。。。
怎么测试呢?我就懒得测了,我只给出测试方案,在你的目标方法里执行ajax调用,在你的后台程序里假如是Servlet里加断点停留,超过指定的delay,如果是异步的,你应该会发现多个请求到达后台,而如果是同步的,只有一个请求,执行完当前请求才会继续执行第二次请求。
如有更好的实现或者任何问题,欢迎探讨!
分享到:
相关推荐
这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,...
vue实现简易计时器组件 在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,... 在Javascript中,代码一般都是同步执行的,但定时器却是异步执行的。 window.setTimeout(callback,delay); //callback:
与Nginx/Tornado/Node.js等全异步的框架不同,Swoole既支持全异步,也支持同步。 除了异步IO的支持之外,Swoole为PHP多进程的模式设计了多个并发数据结构和IPC通信机制,可以大大简化多进程并发编程的工作。其中包括...
第4章 在Node.js中使用事件、监听器、定时器和回调 51 4.1 了解Node.js事件模型 51 4.1.1 比较事件回调和线程模型 51 4.1.2 在Node.js中阻塞I/O 52 4.1.3 会话示例 54 4.2 将工作添加到事件队列 54 4.2.1 实现定时器...
先看一张我绘制的原理图 原理图 setImmediate 也是宏任务,在 ... JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高
JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高,且与微任务所处的代码位置无关 下面这个例子可以看出Promise要...
16.1 什么是同步和异步 16.2 超时设定和时间间隔 16.3 定时器使用--侦听与拦截 16.3.1 标准模式--监视器及其范例 16.3.2 使用定时器时应当注意的问题 16.4 一个例子--漂亮的Web...
window对象; 窗口加载事件;window对象;window对象; 调整窗口大小事件; 2 调整窗口大小事件 ; 定时器方法; 3.定时器方法 ; 案例 60s内只能发送一次短信 ;JavaScript的执行机制;... 同步和异步 ; 执行机制 ; 执行机制 ;
异步球运动球非同步运动的锅炉板
02 JS的window对象之定时器 03 JS的history对象和location对象 04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js...
第七章 案例1通过委托实现异步调用 案例2使用定时器执行方法 案例3控制线程状态 案例4多线程同步的实现 案例5结束进程 案例6多线程资源共享与访问 案例7仅运行一个应用程序实例 案例7如何...
像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等,都可在本源码中得以体现。 Java编写的显示器显示模式检测程序 2个目标文件 内容...
像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等,都可在本源码中得以体现。 Java编写的显示器显示模式检测程序 2个目标文件 内容...