`
tigerl
  • 浏览: 97120 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS 定时器(异步/同步)

阅读更多
关于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定时器

    这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,...

    【JavaScript源代码】vue实现简易计时器组件.docx

    vue实现简易计时器组件  在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,... 在Javascript中,代码一般都是同步执行的,但定时器却是异步执行的。 window.setTimeout(callback,delay); //callback:

    Swoole异步并行和协程C扩展-其他

    与Nginx/Tornado/Node.js等全异步的框架不同,Swoole既支持全异步,也支持同步。 除了异步IO的支持之外,Swoole为PHP多进程的模式设计了多个并发数据结构和IPC通信机制,可以大大简化多进程并发编程的工作。其中包括...

    Node.js MongoDB AngularJSWeb开发中文版.part1

    第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 实现定时器...

    JS异步宏队列微队列原理详解

    先看一张我绘制的原理图 原理图 setImmediate 也是宏任务,在 ... JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高

    JS异步宏队列与微队列原理区别详解

    JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高,且与微任务所处的代码位置无关 下面这个例子可以看出Promise要...

    JavaScript王者归来part.1 总数2

     16.1 什么是同步和异步   16.2 超时设定和时间间隔   16.3 定时器使用--侦听与拦截   16.3.1 标准模式--监视器及其范例   16.3.2 使用定时器时应当注意的问题   16.4 一个例子--漂亮的Web...

    Web前端开发技术-window对象.pptx

    window对象; 窗口加载事件;window对象;window对象; 调整窗口大小事件; 2 调整窗口大小事件 ; 定时器方法; 3.定时器方法 ; 案例 60s内只能发送一次短信 ;JavaScript的执行机制;... 同步和异步 ; 执行机制 ; 执行机制 ;

    虚拟宠物3

    异步球运动球非同步运动的锅炉板

    python入门到高级全栈工程师培训 第3期 附课件代码

    02 JS的window对象之定时器 03 JS的history对象和location对象 04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js...

    C#.NET案例开发集锦代码7-11章

    第七章 案例1通过委托实现异步调用 案例2使用定时器执行方法 案例3控制线程状态 案例4多线程同步的实现 案例5结束进程 案例6多线程资源共享与访问 案例7仅运行一个应用程序实例 案例7如何...

    JAVA上百实例源码以及开源项目源代码

    像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等,都可在本源码中得以体现。 Java编写的显示器显示模式检测程序 2个目标文件 内容...

    JAVA上百实例源码以及开源项目

    像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等,都可在本源码中得以体现。 Java编写的显示器显示模式检测程序 2个目标文件 内容...

Global site tag (gtag.js) - Google Analytics