关于setTimeout和setInterval的用法

最新推荐文章于 2024-05-29 15:14:06 发布

原创最新推荐文章于 2024-05-29 15:14:06 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js小资料

本文详细介绍了JavaScript中的setTimeout和setInterval函数的使用方法及区别。通过示例展示了如何利用这两个函数实现时钟效果，帮助读者理解其在网页加载后的延时或间隔执行特性。

setTimeout(表达式,延迟时间); 单位:ms(毫秒)；1s=1000ms;
setInterval(表达式,交互时间); 单位:ms(毫秒)；1s=1000ms;

window.setTimeout()
在执行时，它从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次;和window.clearTimeout一起使用.

window.setInterval()
在执行时,它从载入页面后每隔指定的时间执行一个表达式或者是函数;(功能类似于递归函数)；和window.clearInterval一起使用.

举个例子吧！

< script>
function showtime( ){
var otime = new Date( );
var mytime = otime.getHours()+':'+otime.getMinutes()+':'+otime.getSeconds();
document.getElementById('mytext').value = mytime;
window.clearTimeout(tt);
var tt = setTimeout("showtime()",1000);//也可以写成 var tt = setTimeout(showtime,1000);
}
< /script>

< input type=text id='mytext'>
< div onclick='setTimeout("showtime()",1000)'>设置< /div>

//上面的代码实现是时钟，在来看一下用
// setInterval实现此效果

< script>
function showtime( ){
var otime = new Date( );
var mytime = otime.getHours()+':'+otime.getMinutes()+':'+otime.getSeconds();
document.getElementById('mytext').value = mytime;
}
< /script>

< input type=text id='mytext'>
< div onclick='setTimeout("showtime()",1000)'>设置< /div>