js中setTimeout的执行机制具体是怎么样的？
 
如果setTimeout里的函数最后执行，那图一里的36行的var b=a(0);不就被38setTimeout(b,1000)意思是在1000毫秒后输出b。 图一是在36行给b赋了值然后输出了0,然后在38行又给b赋值然后输出1。输出为0,1 图二是在16行给b赋了值，然后在17行又给b赋了值这时b变成了1,在用setTimeout输出就变成了输出为1,1
 
Javascript中setTimeout的用法？
 

 
下面这段代码中为什么要使用两个setTimeout？另外为什么没有$(document)setTimeout(code,millisec) var t = setTimeout("javascript语句", 毫秒) setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
 
setTimeout()和setInterval()方法的区别？
 
因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式 所以,完全是不一样的 很多人习惯于将setTimeout包含
 
JS 用setTimeout 那本身的函数不就永远不会终止吗
 
比如 function f(){ alert("k"); setTimeout(f,1000) } 这样一来 程序占首先，setTimeout是可以取消的，可以不让其永远不终止，方法如下： var timer = null;function f(){ alert("k"); timer = setTimeout(f,1000);}// 在另外一个函数中，在某种条件下，取消之前的定时器clearTimeout(timer);这样。
 
javaScript settimeout 时间最大能设置多少。
 
我发现我设置为3000*10000 有效 9000*10000就无效。到底最大值是多少？最大值不清楚。 不过，为什么要设这么大？你想一天后才触发运作？那可以分开来实现呀。 var val = 0, max = 90000; function run(){ val ++; if(val
 
javaScript中的setTimeout返回值有什么用?
 
setTimeout(function,time) 用处是延迟time毫秒再此执行function，而他返回的是这个超时调用的id，也就是这个setTimeout的唯一标示符。 假如你向阻止这个超时调用，就需要用到这个id 如 var st=setTimeout(function,time); 这是你忽然向立即执行
 
js setTimeout函数不执行
 
function docomment_form_hidden(doid, id) { var showid = 'docomment_大哥们你们不知道有闭包这东西吗..function 内是可以有function的 function docomment_form_hidden(doid, id) { var showid = 'docomment_form_'+doid+'_'+id; var hiddenid = 'docomment_form_show_'+doid+'_0'; var focusid = 'do_message_'+d
 
为什么这种写法，js的setTimeout只执行一次？
 
setTimeout是延迟执行，只执行一次，不是定时器 多次间断执行要用setInterval var timer = setInterval( function(){}, 1000); 取消用clearInterval(timer);
 
JavaScript 多个settimeout的问题
 
//gridview渐隐效果 function changeColor(obj) { var row=obj.parentEl你把两个的时间岔开试一下，white效果被或一个效果覆盖，所以看不到white效果 试着 执行以下代买看看： s
 
jquery写一个定时器，为什么setTimeout不执行

经典问题：
 
js setTimeout 0秒，会立即执行吗？
setTimeout 1000ms 若是没有其他任务，是到了时间立即执行么，若不是间隔是多久(浏览器刷新率按60帧算就是1000、60=16.7ms)
setTimeout(function(){console.log("setTimeout执行了")},0)
for(var i=0;i<1000000000;i++){
        if(i==999999999){
                console.log(i);
        }
}
//输出：大约过了三秒后(本电脑测试)，控制台才显示出 999999999，其次才显示出 “setTimeout执行了”。
 
 
 
异步执行的运行机制如下(参考 JavaScript 运行机制详解)
 
 
 
  
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
 （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
 （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
 （4）主线程不断重复上面的第三步。
 
 
 
 
因为 JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。
为了控制要执行的代码，就有一个 JavaScript 任务队列。
这些任务会按照将它们添加到队列的顺序执行。
setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行
总结：setTimeout并不能按照设置的定时准时触发，这点可以从js事件循环来解释。当设置了该定时器时，假设定时1000毫秒，
 
首先，绑定函数交由定时器模块处理；
然后，当到达1000毫秒时，定时器模块会将该绑定事件加入到任务队列中，注意，这个时候已经到了我们的预设时间了，但是实际上函数并没有被执行。
最后，当任务队列中优先于该任务的函数执行完成后，才会执行该定时器绑定的函数。所以这里的实际执行的时间相比预设时间会更晚。
利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：
 
 
setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。
 
 
刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。
 
以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。 那为什么步调不一致就会引起丢帧呢？
 
首先要明白，setTimeout的执行只是在内存中对图像属性进行改变，这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px， 就会出现如下绘制过程：
 
 
第0ms: 屏幕未刷新，等待中，setTimeout也未执行，等待中；
 
 
第10ms: 屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；
 
 
第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了1px， setTimeout 未执行，继续等待中；
 
 
第20ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;
 
 
第30ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;
 
 
第33.4ms:屏幕开始刷新，屏幕上的图像向左移动了3px， setTimeout未执行，继续等待中；
 
 
…
 
从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画面，图像直接从1px的位置跳到了3px的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。
 
setTimeou中的方法，在for循环结束后才执行，正是 因为执行栈中的同步任务执行完之后，任务对列中的任务才能执行，所以导致 “setTimeout执行了” 在延迟了接近三秒之后才会执行。
 
requestAnimationFrame
 
requestAnimationFrame和屏幕刷新是同步的，也就是说屏幕每刷新一次，requestAnimationFrame就触发一次。与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。
 
如果屏幕刷新率是60Hz,那么回调函数就每16.7ms（1000/60）被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
 
除此之外，requestAnimationFrame还有以下两个优势：
 
 
CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
 
 
函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。
 
requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
 在隐藏或不可见的元素中，requsetAnimationFrame 将不会进行重绘或回流，这就意味着更少的 CPU、GPU 和内存使用量。requestAnimationFrame是浏览器专门提供的 api，在运行时浏览器会自动优化方法的调用，并且页面不是激活状态下，动画会暂停执行，有效节省 CPU 开销。
 
IE9-浏览器不兼容该方法，可以使用 setTimeout 来兼容

if(!window.requestAnimationFrame){
	let lastTime = 0;
	window.requestAnimationFrame = function(callback){
		const currTime = new Date().getTime();
		const timeToCall = Math.max(0, 16.7-(currTime - lastTime));
		const id = window.setTimeout(function(){
			callback(currTime + timeToCall);
		},timeToCall);
		lastTime = currTime + timeToCall;
		return id;
	}
}

if(!window.cancelAnimationFrame){
	window.cancelAnimationFrame = function(id){
		clearTimeout(id);
	}
}
 
案例说明： 
 
let i=0
const cb=()=>{i++;console.log(i);requestAnimationFrame(cb)}
requestAnimationFrame(cb)
setTimeout(()=>{console.log("setTimeout1"+i);},0);
setTimeout(()=>{console.log("setTimeout"+i);},1000);
 
如下输出，浏览器默认刷新率基本是每秒60帧，那么 requestAnimationFrame时间间隔就是16.7ms，所以setTimeout 0的实在1之后打印即16.7ms后执行的，1000ms的setTimeout实在60或61输出后执行的，即60*16.7=1000也就是正好1000ms，61就是在延迟了一帧执行的，所以setTimeout不是到了时间就立即执行。
 

 
下面是今日头条的一道前端面试题：
 
async function async1() {
 
console.log("async1 start");
 
await async2();
 
console.log("async1 end");
 
}
 
async function async2() {
 
console.log("async2");
 
}
 
console.log("script start");
 
setTimeout(function() {
 
// setTimeout放入event-loop中的macro-tasks队列，暂不执行
 
console.log("setTimeout");
 
}, 0);
 
async1();
 
new Promise(function(resolve) {
 
console.log("promise1");
 
resolve();
 
}).then(function() {
 
console.log("promise end");
 
});
 
console.log("script end");
 
运行结果：
 
script start
 
async1 start
 
async2
 
promise1
 
script end
 
promise end
 
async1 end
 
setTimeout
 
这里涉及到Microtasks、Macrotasks、event loop 以及 JS 的异步运行机制。
 
一、 单线程模型
 
单线程模型指的是，JavaScript 只在一个线程上运行。也就是说，JavaScript 同时只能执行一个任务，其他任务都必须在后面排队等待。
 
注意，JavaScript 只在一个线程上运行，不代表 JavaScript 引擎只有一个线程。事实上，JavaScript 引擎有多个线程，单个脚本只能在一个线程上运行(称为主线程)，其他线程都是在后台配合。
 
二、同步任务和异步任务
 
程序里面所有的任务，可以分成两类：同步任务(synchronous)和异步任务(asynchronous)。
 
同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。
 
异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果)，该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，异步任务不具有“堵塞”效应。
 
举例来说，Ajax 操作可以当作同步任务处理，也可以当作异步任务处理，由开发者决定。如果是同步任务，主线程就等着 Ajax 操作返回结果，再往下执行；如果是异步任务，主线程在发出 Ajax 请求以后，就直接往下执行，等到 Ajax 操作有了结果，主线程再执行对应的回调函数。
 
三、任务队列和事件循环
 
JavaScript 运行时，除了一个正在运行的主线程，引擎还提供一个任务队列(task queue)，里面是各种需要当前程序处理的异步任务。(实际上，根据异步任务的类型，存在多个任务队列。为了方便理解，这里假设只存在一个队列。)
 
首先，主线程会去执行所有的同步任务。等到同步任务全部执行完，就会去看任务队列里面的异步任务。如果满足条件，那么异步任务就重新进入主线程开始执行，这时它就变成同步任务了。等到执行完，下一个异步任务再进入主线程开始执行。一旦任务队列清空，程序就结束执行。
 
异步任务的写法通常是回调函数。一旦异步任务重新进入主线程，就会执行对应的回调函数。如果一个异步任务没有回调函数，就不会进入任务队列，也就是说，不会重新进入主线程，因为没有用回调函数指定下一步的操作。
 
JavaScript 引擎怎么知道异步任务有没有结果，能不能进入主线程呢？答案就是引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入主线程了。这种循环检查的机制，就叫做事件循环(Event Loop)。维基百科的定义是：“事件循环是一个程序结构，用于等待和发送消息和事件(a programming construct that waits for and dispatches events or messages in a program)”。
 
四、Microtasks(微任务)、Macrotasks(宏任务)
 
在高层次上，JavaScript 中有 microtasks 和 macrotasks(task)，它们是异步任务的一种类型，Microtasks的优先级要高于macrotasks，microtasks 用于处理 I/O 和计时器等事件，每次执行一个。microtask 为 async/await 和 Promise 实现延迟执行，并在每个 task 结束时执行。在每一个事件循环之前，microtask 队列总是被清空(执行)。
 
其中宏任务包括：
 
script(整体代码)
 
setTimeout
 
setImmediate
 
setInterval
 
I/O
 
UI 渲染
 
ajax请求不属于宏任务，js线程遇到ajax请求，会将请求交给对应的http线程处理，一旦请求返回结果，就会将对应的回调放入宏任务队列，等请求完成执行。
 
微任务包括：
 
process.nextTick
 
Promise
 
Object.observe(已废弃)
 
MutationObserver(html5新特性)
 
执行过程
 
上面第三条说了JS 主线程拥有一个 执行栈(同步任务) 和 一个 任务队列(microtasks queue)，主线程会依次执行代码：
 
当遇到函数(同步)时，会先将函数入栈，函数运行结束后再将该函数出栈；
 
当遇到 task 任务(异步)时，这些 task 会返回一个值，让主线程不在此阻塞，使主线程继续执行下去，而真正的 task 任务将交给 浏览器内核 执行，浏览器内核执行结束后，会将该任务事先定义好的回调函数加入相应的任务队列(microtasks queue/ macrotasks queue)中。
 
当JS主线程清空执行栈之后，会按先入先出的顺序读取microtasks queue中的回调函数，并将该函数入栈，继续运行执行栈，直到清空执行栈，再去读取任务队列。
 
当microtasks queue中的任务执行完成后，会提取 macrotask queue 的一个任务加入 microtask queue， 接着继续执行microtask queue，依次执行下去直至所有任务执行结束。
 
可能有的同学看到这里云里雾里，下面举例说明：
 
setTimeout：
 
console.log('第一行')
 
setTimeout(() => {
 
console.log('第三行')
 
});
 
console.log('第五行')
 
// 输出顺序第一行->第五行->第三行
 
1.1. 运行打印第一行
 
1.2. 遇到宏任务setTimeout，把回调函数加入宏任务队列
 
1.3. 向下执行打印第五行
 

 
在第三步执行完成时
 
1.4. 同步执行完毕，没有微任务，去宏任务读取任务队列，取出setTimeout回调函数，执行打印第三行
 

 
执行宏任务
 
Promise：
 
console.log("第一行");
 
let promise = new Promise(function(resolve) {
 
console.log("before resolve");
 
resolve();
 
console.log("after resolve");
 
}).then(function() {
 
console.log("promise.then");
 
});
 
console.log("script end");
 
// 输出顺序: 第一行->promise1->before resolve->after resolve->script end->promise.then
 
2.1. 运行打印第一行
 
2.2. promise构造函数是同步的，执行console.log("before resolve");
 
2.3. resolve()是异步的，.then回调放入微任务队列，向下执行，
 
2.4. 打印after resolve
 
2.5. 继续执行打印script end
 
2.6. 取出微任务，打印promise.then
 

 
执行图
 
async await:
 
async function async1(){
 
console.log('async1 start');
 
await async2();
 
console.log('async1 end')
 
}
 
async function async2(){
 
console.log('async2')
 
}
 
console.log('script start');
 
async1();
 
console.log('script end')
 
// 输出顺序：script start->async1 start->async2->script end->async1 end
 

 
执行流程
 
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体
 
setTimeout+Promise
 
console.log("start");
 
setTimeout(function() {
 
console.log("timeout");
 
}, 0);
 
new Promise(function(resolve) {
 
console.log("promise");
 
resolve();
 
}).then(function() {
 
console.log("promise resolved");
 
});
 
console.log("end");
 
// 执行顺序start->promise->end->promise resolved->timeout
 
4.1. 输出start
 
4.2. setTimeout回调函数放入宏任务
 
4.3. 输出promise
 
4.4. resolve()异步，回调函数放入微任务
 
4.5. 输出end
 
4.6. 执行微任务
 
4.7. 输出promise resolved
 
4.8. 执行宏任务
 
4.9. 输出timeout
 
第一步，执行同步代码：
 
async function async1() {
 
console.log("async1 start"); // 同步代码2
 
await async2(); // 调用async2(),async2()的返回值是promise，不执行promise的resolve,让出线程
 
console.log("async1 end");
 
}
 
async function async2() {
 
console.log("async2"); // 同步代码3
 
}
 
console.log("script start"); // 同步代码1
 
setTimeout(function() {
 
// 异步 setTimeout放入event-loop中的macro-tasks队列，暂不执行
 
console.log("setTimeout");
 
}, 0);
 
async1();
 
new Promise(function(resolve) {
 
console.log("promise1"); // 同步代码4
 
resolve();
 
}).then(function() {
 
console.log("promise end"); // 不执行
 
});
 
console.log("script end"); // 同步代码5
 
console.log("script start"); // 同步代码1这句代码毫无疑问是同步执行的 ；
 
setTimeout()是异步任务，加入异步队列，不执行；
 
然后调用async1()，执行这个方法体内的同步函数，打印console.log("async1 start"); // 同步代码2；
 
向下执行，遇到await关键字，调用async2(),执行同步代码打印console.log("async2"); // 同步代码3，让出线程。await是让出当前函数线程，交给函数外的代码执行；
 
线程跳出async1(),向下执行Promise(),执行里面的同步代码打印promise1，resolve是异步函数，加入异步队列，此时继续执行同步函数，回到await关键字处，执行剩余代码；
 
async2()是异步方法，默认返回promise，所以把返回的promise加入异步队列；
 
此时没有同步任务，就去执行异步任务，因为setTimeout()的优先级低于promise，所以会优先执行promise队列。
 
此时异步队列任务顺序： setTimeout()-new Promise().resolve()-async2().resolve(),setTimeout优先级低，所以先执行下一个，打印console.log("promise end");
 
继续执行异步任务，async2()执行完毕，同步await，这时候同步向下执行console.log("async1 end")；
 
最后执行setTimeout()。
 

 
执行顺序图
 
回到最初的面试题：
 
async function async1() {
 
console.log("async1 start"); // 同步代码2
 
await async2(); // 调用async2(),async2()的返回值是promise，不执行promise的resolve,让出线程
 
console.log("async1 end");
 
}
 
async function async2() {
 
console.log("async2"); // 同步代码3
 
}
 
console.log("script start"); // 同步代码1
 
setTimeout(function() {
 
// 异步 setTimeout放入event-loop中的macro-tasks队列，暂不执行
 
console.log("setTimeout");
 
}, 0);
 
async1();
 
new Promise(function(resolve) {
 
console.log("promise1"); // 同步代码4
 
resolve();
 
}).then(function() {
 
console.log("promise end"); // 不执行
 
});
 
console.log("script end"); // 同步代码5
 
console.log("script start"); // 同步代码1这句代码毫无疑问是同步执行的 ；
 
setTimeout()是异步任务，加入宏任务队列，不执行；
 
然后调用async1()，执行这个方法体内的同步函数，打印console.log("async1 start"); // 同步代码2；
 
向下执行，遇到await关键字，调用async2(),执行同步代码打印console.log("async2"); // 同步代码3，让出线程。await是让出当前函数线程，交给函数外的代码执行；
 
线程跳出async1(),向下执行Promise(),执行里面的同步代码打印promise1，resolve是异步函数，加入微任务队列，此时继续执行同步函数，回到await关键字处，执行剩余代码；
 
此时没有同步任务，就去执行微任务队列任务，所以会优先执行promise队列。
 
此时微队列任务顺序：new Promise().resolve()- console.log("async1 end");,s所以先执行下一个，打印 console.log("promise end")`;
 
这时候同步向下执行console.log("async1 end")；
 
最后执行宏任务setTimeout()。

 
1. SetTimeOut()
 
1.1 SetTimeOut()语法例子
 
1.2 用SetTimeOut()执行Function
 
1.3 SetTimeOut()语法例子
 
1.4 设定条件使SetTimeOut()停止
 
1.5 计分及秒的counter
 
2. ClearTimeout()
 
3.  Set Flag
 
10.1　setTimeout( )
 
setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method。請先看以下一個簡單, 這是沒有實際用途的例子, 只是用來示範 setTimeout( ) 的語法。
 
1.　setTimeout( ) 語法例子
 
練習-69　等候三秒才執行的 alert( )
 
在 第 3 章 說到 alert 對話盒, 一般是用按鈕叫出來, 在這練習, 你會看到網頁開啟後 3 秒, 就會自動出現一個 alert 對話盒。
 
1.　請用瀏覽器開啟示範磁碟中的 timeout1.htm, 這檔案有以下內容:
 
 示範網頁 
 
 
請等三秒!
 
2.　留意網頁開啟後三秒, 就會出現一個 alert 對話盒。
 
setTimeout( ) 是設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到了, 瀏覽器就會執行一個指定的 method 或 function, 有以下語法:
 

 
今次例子是設定等 3 秒 (3000 milliseconds), 瀏覽器就會執行 alert( ) 這一個method。
 
2.　用 setTimeout( ) 來執行 function
 
setTimeout( ) 通常是與 function 一起使用, 以下是一個較上個練習複雜的例子。
 
練習-70　狀態列中自動消失的文字
 
在練習-20, 你看過如何用按鈕在狀態列顯示文字, 然後再用按鈕消除文字, 在這練習, 你看到如何用按鈕在狀態列顯示文字, 而這文字會在三秒後自動消失。
 
1.　請用瀏覽器開啟示範磁碟中的 timeout2.htm, 這檔案有以下內容:
 
 示範網頁 
 
 
 
 
2.　請在按鈕上按一下, 你應見到狀態列出現 Hello 這字, 留意過了三秒, 這字就會消失。
 
1.　這處先設定一個名為 clearWord( )的 function, 作以下定義:
 
window.status=""
 
這是用來消除狀態列的文字 (請看練習-20 的說明), 瀏覽器執行 clearWord( ) , 就會消除狀態列的文字。
 
2.　今次按鈕設定了啟動以下兩項工作, 用 ， 分隔, 瀏覽器會順序執行這兩項工作:
 
onClick="window.status='Hello' , setTimeout('clearWord( )',3000) "
 
3.　今次的 setTimeout( )有以下設定:
 

 
這是設定等 3 秒 (3000 milliseconds) 瀏覽器就會執行 clearWord( )這一個function。
 
在第 2 章, 你看過如何使到父視窗開啟時自動開啟一個子視窗, 若觀看者不關閉這子視窗, 這子視窗就會一路開啟。看過以上的練習, 請你設計一個會開啟子視窗的網頁, 而這子視窗在開啟後兩秒, 就會自動關閉。
 
3.　不斷重複執行的 setTimeout( )
 
setTimeout( ) 預設只是執行一次, 但我們可以使用一個循環方式, 使到一個setTimeout( ) 再啟動自己一次, 就會使到第二個 setTimeout( ) 執行, 第二個又啟動第三個, 這樣循環下去, 這 setTimeout( )就會不斷執行。
 
練習-71　自動每秒加 1 的 function
 
在這練習, 你看到如何使用 setTimeout( )令文字框的數值每秒就加 1, 當然你也可以設定其他遞增的速度, 例如每五秒就加 5, 或每五秒就加 1。
 
1.　請用瀏覽器開啟示範磁碟中的 timeout3.htm, 這檔案有以下內容:
 
2.　網頁開啟後, 請你留意文字框中的數值轉變。
 
3.　請你將這檔案複製去硬碟, 更改一些設定, 例如 x = x+5, 或將等候時間改為5000, 看有什麼反應。
 
1.　這網頁有兩個 script, 第一個是設定countSecond( ) 這個 function, 第二個在後的是在網頁完全載入後, 就啟動這 function。
 
2.　留意今次以下的設定:
 
functioncountSecond( ){x=x+1　 document.fm.displayBox.value = x　 setTimeout("countSecond( )",1000)}
 
當 countSecond( ) 啟動後, 就會啟動 setTimeout( ), 這個 method 在一秒後又啟動 countSecond( ),countSecond( )啟動後又啟動setTimeout( ) , 所以得出的結果是 countSecond( )每秒執行一次。
 
3.　在 JavaScript, 我們是使用這處說的方法使到一些事項不斷執行, 其中一個用途是顯示轉動時間, 另一個用途是設定跑動文字, 隨後的章節會有例子。
 
用上述的方法設定時間, setTimeout( ) 雖然設定了是一秒, 但瀏覽器還有另外兩項功能要執行, 所以一個循環的時間是稍多於一秒, 例如一分鐘可能只有58 個循環。
 
4.　設定條件使 setTimeout( ) 停止
 
setTimeout( )的迴圈開始後, 就會不斷重複, 在上個練習, 你看到文字框的數字不斷跳動, 但我們是有方法使到數字跳到某一個數值就停下來, 其中一個方法是用if...else設定一個條件, 若是 TRUE 就繼續執行 setTimeout( ) , 若是 FALSE 就停止。
 
例如要使到上個練習的 counter 跳到 20 就停下, 可將有關的 function 作以下的更改。
 
functioncountSecond( ){　if (x<20)　　　{x=x+1document.displaySec.displayBox.value =xsetTimeout("countSecond( )", 1000)    　　}}
 
5.　計分及計秒的 counter
 
在前面的練習, 相信你已學識如何使用 setTimeout( ), 現在請你看一個較複習的例子。
 
練習-72　計時的 counter
 
在這練習, 你要設定兩個文字框, 一個顯示分鐘, 另一個顯示秒, 網頁開啟後, 就會在這兩個文字框中自動計時。
 
1.　請用瀏覽器開啟示範磁碟中的 timeout4.htm, 這檔案有以下內容:
 
你在本網頁的連線時間是:
 
 分 
 
 
 秒。
 
2.　請你留意兩個文字框中的數字轉變。
 
1.　這網頁有兩個 function, 一個用來計分鐘, 一個用來計秒。在這處, 筆者只是示範setTimeout( )的操作, 因為計時器有其他更精簡的寫法。(留意: 這方式的計時並不準確。)
 
2.　留意計秒的 function:
 
functioncountSec( ){x=x+1z=x%60document.displaySec.displayBox.value=zsetTimeout("countSec( )",1000)
 
}
 
這處的 % 符號是 modulus (餘數), 例如z=x%60 表示先進行 x/60, 得出的餘數作為z 這變數, 例如 82 秒, modulus 就是 22, 所以文字框會顯示 22 而不是 82。
 
3.　若你要將單位數字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:
 
functioncountSec( ){x=x+1z=x%60if (z<10)　{z= "0" +z}　 document.displaySec.displayBox.value=zsetTimeout("countSec( )",1000)}
 
10.2　clearTimeout( )
 
在前一節, 你看過如何使用 setTimeout( )來使到瀏覽器不斷執行一個 function, 當一個 setTimeout( )開始了循環的工作, 我們要使它停下來, 可使用clearTimeout( ) 這 method。
 
clearTimout( ) 有以下語法:　clearTimeout(timeoutID)
 
要使用 clearTimeout( ), 我們設定 setTimeout( ) 時, 要給予這 setTimout( ) 一個名稱, 這名稱就是 timeoutID , 我們叫停時, 就是用這 timeoutID來叫停, 這是一個自訂名稱, 但很多程式員就以 timeoutID 為名。
 
在下面的例子, 筆者設定兩個 timeoutID, 分別命名為 meter1 及 meter2, 如下:
 
timeoutID　↓meter1= setTimeout("count1( )",1000)meter2= setTimeout("count2( )",1000)
 
使用這 meter1 及 meter2 這些 timeoutID 名稱, 在設定 clearTimeout( )時, 就可指定對哪一個setTimeout( )有效, 不會擾及另一個setTimeout( )的操作。
 
練習-73　可停止的 setTimeout( )
 
這練習以練習-71 為藍本, 但作了兩個改變: (1) 有兩個 setTimeout( ), (2) 有兩個按鈕, 分別可停止這兩個 setTimout( )。
 
1.　請用瀏覽器開啟示範磁碟中的 clear.htm, 這檔案有以下內容:
 
2.　留意網頁中的兩個文字框及內裡變動的數字, 每個文字框旁有兩個按鈕, 請你試試兩個按鈕的反應。
 
3.　請你連續按多次 [繼續計時] 的按鈕, 留意數值的跳動加快了, 原因是每按一次就啟動 function 一次, 每個 function 都令數值跳動, 例如啟動同一的 function 四次, 就會一秒跳四次。(請看下一節)
 
10.3　Set flag
 
前個練習說到我們用一個按鈕來啟動一個 function, 每按一下就會啟動這 function 一次, 請看以下例子。
 
練習-74　效果重複的 setTimeout( )
 
這練習實際是將 練習-73 簡化, 只有一個計時器, 筆者想示範的是每按 [繼續計時] 一次, 就會啟動 count( ) 這 function 一次。
 
1.　請用瀏覽器開啟示範磁碟中的 flag1.htm, 這檔案有以下內容:
 
 

 
2.　網頁開啟後, 你應見到文字框中的數字跳動, 請你按四次 [繼續計時], 留意這會加快數字跳動, 原因是有關的 function 被開啟了多個, 每個都會使數字轉變。
 
3.　按了四次 [繼續計時] 的按鈕後, 請你按 [停止計時] 的按鈕, 你會發現要按五次才能停止數字跳動。
 
在編寫程式時, 我們常要提防使用者作出一些特別動作, 例如使用者按兩次 [繼續計時] 按鈕, 這計時器就失準了。我們是否有辦法使到一個按鈕被按一次就失效呢? 這就不會產生重複效果。
 
筆者藉這處的例子 (隨後還有多個例子), 解說程式中一個 set flag (設定旗標) 的概念, flag 是一個記認, 一般來說, 這可以是 0 或是 1 (也可用 on 或 off, 或任何兩個自選的名稱或數字), 但也可以是 2、3、4 或更大的數字, 在這例子有以下設定:
 
1.　程式開啟時flag=0。
 
2.　當 counter( )執行時會順便將 flag 變為 1。
 
3.　在 [繼續計時] 這按鈕的反應中, 會先檢查 flag 是 0 或是 1, 若是 0 就會產生作用, 若是 1 就沒有反應。
 
4.　使用這 flag 的方式, count( ) 這 function 開啟後, [繼續計時] 這按鈕就沒有作用。
 
這處的 flag 是一個變數, 可任意取名, 我們用 flag來稱呼這變數的原因, 是因為這變數好處一支旗, 將旗豎起 (flag is on), 就會產生一個作用, 將旗放下 (flag is off), 就產生另一個作用。
 
練習-75　只可開啟一次的 function
 
這練習是將上個練習加多一個 flag, 使到每次只能有一個 count( ) 這 function 在進行。
 
1.　請用瀏覽器開啟示範磁碟中的 flag2.htm, 這檔案有以下內容:
 
 
 
 
2.　在網頁中, 你應見到三個按鈕及文字框中的數字跳動。
 
3.　請你按 [Show flag] 這按鈕, 應見到一個話對盒顯示 flag 是 1。
 
4.　請你按 [停止計時] 這按鈕, 數字停止跳動, 請你按 [Show flag] 這按鈕, 應見到話對盒顯示 flag 是 0。
 
5.　請你按多次 [繼續計時] 這按鈕, 你應見到數字不會加快, 請你按 [Show flag] 這按鈕, 應見到話對盒顯示 flag 變回 1。
 
1.　這網頁第 4 行有這一句: flag=0 , 這是設定 flag 這變數及將初始值定為 0, 你也可將初始值定為 1, 隨後有關的 0 和 1 對調。
 
2.　count( ) 這 function 最後一句是flag=1 , 所以啟動 count( ) 後, flag 就會變為 1。
 
3.　[繼續計時] 的按鈕是用來啟動 restart( ), 這 function 有以下設定:
 
function restart( ){　if (flag==0) 　　　{count( )　}}
 
這處的 if statement 檢查 flag 是否等於 0, 若是 0 就啟動 count( ), 若是 1 (即不是 0) 就沒有反應, 使用這方法, 若 count( ) 已在執行中, [繼續計時] 這按鈕不會有作用。
 
這處的 flag=1 設定, 實際設為 1 或 2 或 3 等數值都是一樣的, 只要不是 0 就可以了, 所以這兩個相對的旗標, 看似是 "0" 和 "1", 實際是 "0" 和 "non-zero" (非-0)。
 
4.　[停止計時] 的按鈕有以下設定:
 
onClick="clearTimeout(timeoutID);flag=0"
 
這是停止 setTimeout( ) 的操作時, 同時將 flag 轉回 0, 這使到restart( )這 function 可以重新啟動count( )。