第10章 交互式编程

  到目前为止,只要页面一加载,就会运行页面中的JavaScript代码,只有包含了对alert或confirm这样的函数调用的时候,程序才会暂停。但是,我们并不是总希望页面一加载就运行所有的代码,如果想要让一些代码延迟运行或者用户做了某些响应动作之后才运行,该怎么办呢?

  在本章中,当代码运行时,我们会看到不同的修改方法,这种编程方式叫作交互式编程(interactive programming)。我们可以创建交互的Web页面,让页面随着时间而改变,并且能够响应用户的行为。

10.1 使用setTimeout函数延时代码

  我们可以告诉JavaScript在一定时间之后执行一个函数,而不是立即执行该函数。像这样来延时一个函数,在JavaScript中叫作设置超时(timeout)。在JavaScript中,使用setTimeout函数来设置延时。这个函数接受两个参数(如图10-1所示):分别是一段时间之后要调用的函数以及所要等待的时间(毫秒)。

《javascript-少儿编程》第10章交互式编程之使用setTimeout函数延时代码

图10-1 setTimeout的参数

  下面的程序清单展示了如何使用setTimeout来显示一个alert对话框

《javascript-少儿编程》第10章交互式编程之使用setTimeout函数延时代码

  在❶处,创建了timeUp函数,该函数打开了一个alert对话框,显示”Time,s up!”。在❷处,调用setTimeout函数,接受的两个参数是:想要调用的函数(time Up)和调用函数前等待的毫秒数(3000).实际上是表示“等3秒钟后再调用timeUp函数”。当第一次调用setTimeout(time Up,3000)时,什么都没发生,但是在3秒钟之后调用timeUp函数,就弹出了一个alert对话框。

  注意,调用setTimeout的返回值是1.这个返回值叫作timeout ID。timeout ID是一个数字,用来表示这个特定的timeout(函数调用延迟的时间)。返回的实际数字可以是任意的数值,因为它只是一个标识符。再次调用setTimeout,它会返回一个不同的timeout,如下所示:

《javascript-少儿编程》第10章交互式编程之使用setTimeout函数延时代码

  可以使用clearTimeout这个函数的timeout ID来取消特定的timeout。后面我们将会看到这一点。


本站内容未经许可,禁止任何网站及个人进行转载。

   口袋儿题库-青少儿编程自测题库