`
tigerl
  • 浏览: 98541 次
  • 性别: 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,如果是异步的,你应该会发现多个请求到达后台,而如果是同步的,只有一个请求,执行完当前请求才会继续执行第二次请求。

如有更好的实现或者任何问题,欢迎探讨!
分享到:
评论

相关推荐

    asynchronous timer_异步定时器_

    2. **定时器实现**:异步定时器的实现方式多种多样,常见的有计时器类库(如POSIX的`timer_create`),或者使用事件循环(如在Node.js中的`setInterval`)。在多线程环境中,可以使用线程池或单独线程,线程池可以更...

    Javascript定时器 一 单线程 修正

    JavaScript定时器是编程中不可或缺的一部分,它允许我们延迟或周期性地执行代码。在这个主题中,我们将深入探讨JavaScript中的定时器机制,特别是与单线程环境相关的方面。 首先,JavaScript是一种解释型、基于原型...

    Javascript定时器 一 单线程

    JavaScript定时器是编程中...总结,JavaScript定时器在单线程环境下运行,它们通过事件循环机制来异步执行任务。理解这个机制以及如何有效地使用setTimeout和setInterval,是每个JavaScript开发者必须掌握的基础技能。

    异步函数同步_Make_an_asynchronous_function_synchronous_javascript

    本文将探讨如何在JavaScript中实现异步到同步的转换,以及这种方法的优缺点。 ### 异步编程基础 JavaScript的异步编程主要基于回调函数、Promise、async/await等机制。这些方法在处理非阻塞任务时非常有效,但它们...

    js页面显示多个定时器

    在JavaScript中,定时器是实现延迟执行或周期性任务的关键工具。它们可以帮助我们在网页加载后,在特定的时间点执行代码,或者每隔一定时间重复执行某个功能。本知识点将深入探讨JavaScript中的定时器及其在页面上...

    nodejs异步IO的实现

    随着JavaScript ES6及后续版本的引入,Node.js开始支持Promise和async/await语法,为异步编程提供了更优雅的解决方案。Promise可以链式调用,避免了回调地狱,而async/await则进一步提升了代码可读性,使得异步代码...

    Javascript定时器 三 setTimeout func 0

    JavaScript定时器是编程中一种非常重要的机制,它允许我们在特定的时间间隔后执行代码。本篇文章主要探讨`setTimeout(func, 0)`这一特定用法,它在JavaScript中的作用和实际应用场景。 `setTimeout`函数是...

    nodejs异步IO的实现 转:http://cnodejs.org/topic/4f16442ccae1f4aa2700113b

    在IT领域,Node.js以其高效的异步I/O处理能力而著名。Node.js是基于Chrome V8引擎的JavaScript运行环境,它的出现使得JavaScript得以在服务器端运行,为开发高性能的网络应用提供了可能。本文将深入探讨Node.js异步...

    js中同步与异步处理的方法和区别总结.docx

    JavaScript 中同步与异步处理的方法和区别总结 JavaScript 中的同步和异步处理是两种不同的编程方式,它们可以影响程序的执行效率和编程难度。在本文中,我们将详细介绍 JavaScript 中同步和异步处理的方法和区别。...

    《JavaScript异步编程》PDF版本下载.txt

    - 对于需要释放资源的操作(如关闭文件流、清理定时器等),应该确保这些操作在异步流程的最后阶段得到妥善处理。 4. **性能优化** - 尽量减少不必要的异步调用,合理设计应用架构,避免不必要的资源消耗。 综上...

    常见定时器问题解答

    1. 使用定时器库:许多编程语言提供了成熟的定时器库,如Python的APScheduler,Node.js的node-cron,它们提供了丰富的功能和良好的错误处理。 2. 队列处理:将定时任务放入队列,按顺序执行,可以避免回调地狱,...

    JS 异步处理机制.pdf

    JavaScript(JS)异步处理是Web开发中的核心概念,尤其在构建高性能、用户体验良好的互动式应用时至关重要。在JavaScript中,异步编程主要用于避免阻塞主线程,确保用户界面的流畅性和响应性。以下是关于JS异步处理...

    深入探寻javascript定时器

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

    解决js ajax同步请求造成浏览器假死的问题

    开发者可以通过使用异步请求或将耗时的请求操作放入setTimeout等JavaScript定时器中来避免同步请求带来的阻塞问题。这样可以保证用户界面的流畅性,即使在处理耗时的网络请求时也能提供良好的用户体验。

    JavaScript — 异步概念1

    Promise的异步处理过程也遵循这一机制,无论是封装同步还是异步函数,Promise都会在适当的时候改变自身的状态,并通过`then`注册的回调来响应这个状态变化。 总结来说,理解和掌握异步回调和Promise是成为...

    JavaScript异步编程

    JavaScript异步编程是Web开发中的核心概念,尤其在构建高性能、响应式的用户界面时不可或缺。JavaScript作为单线程语言,其执行模型决定了它不能同时处理多个任务,而是采用事件循环和回调函数、Promise、async/...

    定时器源码

    - **C++的boost.asio定时器**:异步I/O库中的组件,支持多种定时器类型。 - **Python的time模块和threading模块**:time模块提供基本的延迟功能,threading模块提供更复杂的定时任务支持。 - **JavaScript的...

    深入理解JavaScript编程中的同步与异步机制

    在深入理解JavaScript编程的过程中,同步与异步机制是核心概念之一,它们影响着程序的执行流程和性能。随着互联网技术的发展,JavaScript不再局限于浏览器端,通过Node.js等技术的应用,JavaScript的异步编程能力...

    定时器 源码+程序

    3. **基于事件的定时器**:如JavaScript中的setTimeout或setInterval,它们依赖于事件循环来调度任务,适用于浏览器环境。 ### 应用场景 定时器、消息循环和回调函数组合使用,常用于以下场景: - 周期性更新UI,...

Global site tag (gtag.js) - Google Analytics