JS异步处理 setTimeout / setInterval 比较

一般来说JS异步处理主要有两种:  setTimeout 和 setInterval

如果只需要延时执行一次XXX事件,那么一般采用setTimeout

setTimeout(function(){alert("kewen nihao!")}, 2000);

很容易明白就是延时2秒,执行方法体里面的代码。

但是如果需要根据某个条件循环执行,那么就必须使用setInterval了。

setTimeout在 for/while循环中,是不会等待延时时间的。

比如我现在这样写:

		for (var int = 0; int < 10; int++) {
			setTimeout(function(){alert("kewen nihao!")}, 2000);
		}

按照正常理解,那肯定是等2秒,弹一次框。 实际则不然,for循环会执行完所有的循环体,然后2秒后一下子弹出10次弹框。这表示循环体内不会等待setTimeout的延时。

这个时候我们就要采用setInterval来实现每次循环延时2秒执行的需要:

 var intervalId = setInterval(function(){
	times += 1;
	alert("kewen nihao!");
	if (times == 10) {
		clearInterval(intervalId);
	}
},5000); }

这个时候就会按照我们之前设想的,每隔5秒钟执行一次方法体,直到循环10次结束。

clearInterval(intervalId) 用于终止此次循环。 setInterval会有一个id的返回值,用于clearInterval时使用。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-29 07:14:38

JS异步处理 setTimeout / setInterval 比较的相关文章

JS中定时器setTimeout,setInterval,clearTimeout,clearInterval用法

setTimeout是指过多久执行,只执行一次 setInterval是指每过多久执行一次 clearTimeout是关闭setTimeout定时器 clearInterval是关闭setInterval定时器,不让它一直执行 <html> <head> <title></title> </head> <style> </style> <script> window.onload=function(){ var

js异步处理工作机制(setTimeout, setInterval)

经常谈到异步,但是发现自己一直没深入理解setTimeout, setInterval,逛论坛的时候发现了这篇好文章,分享一下. ————————————————————以下为原文————————————————————————————— 从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的.计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的.我们先来认识一下下面三个函数是如何控制计时器的. var id = setTimeout(fn, de

JS异步执行之setTimeout 0的妙用

最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题.如果遇到可以并发执行的业务逻辑,再排队就很低级了,所以需要异步执行! 1.什么是异步? setTimeout(function(){ console.log(0); },0) console.log(1); // 先打印 1 // 再打印 0 比方说有些饭店你去吃饭

JS中的setTimeout和setInterval的区别

学了许久的javascript,发现其中非常常用的两个函数,就是setInterval和setTimeout函数,对这两个函数的理解,有时觉得很模糊,经过多次的试验,终于对它有了比较深入的了解.定义,setInterval()-- 间隔指定的毫秒数不停地执行指定的代码.setTimeout,延迟两秒调用函数,这个定义非常的简单,但是它并不像字面意思上那么的简 很多人都觉得这两个方法差不多,但是,实际上,他们差的很远呢     因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指

js中setTimeout/setInterval定时器用法示例

js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 function timedMsg() { setTimeout("alert('7 seconds!')",5000)//5秒后弹出信息 } setTimeout("timedMsg()",2000);//2秒后执行方法 timedMsg setInterval:在指定的时间间隔内

javascript 异步编程-setTimeout

javascript的执行引擎是单线程的,正常情况下是同步编程的模式,即是程序按照代码的顺序从上到下依次顺序执行.只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),那么在执行期间任何UI更新都会被阻塞,界面事件处理也会停止响应.导致整个页面卡在这个地方,其他任务无法执行. 特别是在for循环语句里,如果for循环的处理逻辑比较复杂,并且循环次数过多,超过1000次时,javasc

js异步模型

前言:虽然关于js异步模型的文章已经是相当多,前端们对其也都是有各自的理解.本文的目的是梳理一下我对js异步模型的理解,以及希望给其他前端在这方面提供一个参考.本文只讲js异步模型,下一篇文章再去扯promise/a标准,jquery的promise和deferred对象.本文主要说的是浏览器端的js异步.下面罗列一下关于这方面的资料:JavaScript异步编程:设计快速响应的网络应用(这本书是为数不多专门讲js异步的书),别人写的关于js异步的文章(js异步编程1,js异步编程2),浏览器内

js异步处理工作机制

js异步处理工作机制 从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的.计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的.我们先来认识一下下面三个函数是如何控制计时器的. var id = setTimeout(fn, delay); - 初始化一个计时器,然后在指定的时间间隔后执行.该函数返回一个唯一的标志ID(Number类型),我们可以使用它来取消计时器. var id = setInterval(fn, delay); - 和se

浅析JS异步执行机制

前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有一定基础的同学是十分清楚的.timeout仅仅只会执行一次,而interval则会执行多次. setTimeout(function (args) { console.log('timeout') }, 1000); setInterval(function (args) { console.log