JavaScript SetTimeout:解锁时间控制的秘密
您无法停止时间流,但您可以使用SetTimeout等方法控制计算机上的时序操作。掌握这个,您可以从创建动画中完成所有内容,以便定期使用新数据刷新网页。假设您想显示一个显示“Hello”的警报。以下示例确实如此。
alert('你好');
如果您希望在浏览器运行该代码后2秒左右执行该警告语句,请将该代码作为第一个参数传递给setTimeout,如下所示:
SetTimeout(“警报(1)”,2000);
此SetTimeOut中的第一个参数是一个引号分隔的字符串,包含对警报功能的调用。第二个参数是延迟值,告诉浏览器在第一个参数中执行代码。由于延迟值为毫秒,因此SetTimeOut在浏览器运行SetTimeout语句后2秒执行警报语句。在任何时候使用此语法,您需要在您指定的时间间隔内执行一次代码。
不熟悉JavaScript参数吗?更多信息请访问Udemy.com。
掌握基本功能
此示例延迟了执行显示“Hello”的警报命令的执行。一个更有用的任务可能是在某人访问您的网页后,将图像显示为几秒钟。虽然您可以编写代码以使图像消失,但它可能需要超过一些陈述来做到这一点。您可以通过setTimeout传递包含要运行的代码的函数的名称,而不是传递包含代码的字符串,而不是传递包含代码的函数的名称,如下所示:
setTimeout(“sayHello()”,2000年);
这个setTimeout在浏览器执行setTimeout语句后2000毫秒调用sayHello函数。下面是sayHello函数:
function sayHello() {alert("Hello!");}
当JavaScript代码运行setTimeout语句时,浏览器会在两秒钟后显示“Hello”。注意,setTimeout语句中的" sayHello() "用引号括起来了。JavaScript假定您希望它运行引号之间的内容,当它看到“sayHello()”在引号内。
您可以通过函数指针,而不是传递在引号中的函数的名称,而不是通过函数指针,如下所示:
Settimout(Sayhello,2000);
将此功能指针传递给Settimeout时,请勿在引号中包含它或在指针名称后放置括号。
探索高级功能
最后,你可以传递一个匿名函数给setTimeout,如下例所示:
setTimeout(函数(){改变颜色(“红”);}, 3000)}
此匿名函数调用名为setcolor的函数。匿名功能也将“红色”传递给SetColor函数。延迟因子为3000.如果您的SetColor函数接受参数,则在此实例中的值将是“红色”。该函数可以根据需要使用该值来执行其任务。
作为示例所示,匿名函数为您提供将参数传递给另一个功能的能力;通过将指针传递给函数来解决来解决这个问题。
在迄今为止的示例中,SetTimeOut方法使代码在指定的延迟之后一次运行。当您希望连续运行代码时,创建一个递归调用的函数,例如下面显示的函数:
function updateTime() {var clock = document.getElementById('clockDiv');var currentTime = new Date();时钟。innerHTML = currentTime.toLocaleTimeString ();;setTimeout(“updateTime () ', 2000);}
第一个语句假定您的网页具有具有“ClockDiv”的ID的DIV。当该语句运行时,它存储对时钟变量中的CLOWNDIV DIV的引用。
更多关于有效使用JavaScript函数的信息,请访问Udemy.com。
接下来的两个语句获取当前时间,并将时钟div的innerHTML设置为该时间。最后,setTimeout语句调用updateTime函数。因为延迟值是1000,所以updateTime方法延迟1秒运行。当这段代码在浏览器中执行时,您将看到一个div,它的时间值每一秒就会改变一次。这段代码会永久运行,因为本例中没有机制来停止它。
设置间隔:替代时序方法
JavaScript还有另一个名为setInterval的计时器方法,类似于setTimeout。SetInterval重复运行您指定的代码,如下所示:
SetInterval(Sayhello,2000);
当此语句运行时,它会告诉浏览器每2000毫秒执行Sayhello函数。当您需要使用单个语句重复运行代码时,您可能更愿意使用setInterval。需要考虑的一个重要因素是浏览器执行setTimeout和setInterval的方式。如果您告诉setInterval每2000毫秒调用函数,则浏览器每2000毫秒运行函数。
另一方面,setTimeout不会再次执行代码,直到代码运行完毕。如果您告诉setTimeout每2000毫秒运行一个名为performComplexTasks的函数,而该函数运行需要3000毫秒,那么setTimeout在5000毫秒内不会再次调用该函数。记住这个事实可以帮助您理解为什么setTimeout代码有时不能按预期运行。
额外计时器技巧
您可能会发现创建一个保存对setTimeout或setInterval方法的引用的变量很有帮助。下面的例子演示了如何保存这些引用类型:
var myTimer1 = setTimeout(function1, 8000);var myTimer2 = setinterval(function2, 2000);
在这些语句运行后,MyTimer1变量保存对SetTimeout对象的引用,MyTimer2变量保存对SetInterval对象的引用。由于此SetInterval方法调用每2000毫秒执行函数2函数,因此函数2每2000毫秒运行。您可以通过调用ClearInterval函数随时停止它,如下所示:
ClearInterval(Mytimer2)
setTimeout语句告诉浏览器在8000毫秒之后运行function1。您可以在8000毫秒之前通过调用clearTimeout(myTimer1)来阻止该函数的执行。
网站开发人员使用setTimeout的各种创造性的方式。如果您想创建一个幻灯片,可以编写一个setTimeout语句来重复调用页面更新函数。该函数可以更改图像的src属性,使其指向另一个图像URL。通过调整setTimeout的延迟因子来控制连续幻灯片之间的时间长度。
SetTimeout还可以帮助您设置Web页面对象。例如,如果您想在页面上移动对象,请创建每次函数运行时更改对象顶部和左属性值的函数。如前所述,使用SetTimeOut递归递归调用该功能。使用SetTimeOut在10分钟内调用10分钟后的按钮在10分钟后致电函数。这对网页有用,该网页为人们提供有限的时间来执行特定任务。您可能会集思广益其他有用的任务塞维率可以在测试后进行这种有用的方法。