setTimeout和setInterval

setTimeout(methodName, interval); //间隔时间单位为毫秒,表示interval毫秒后执行方法methodName

setInterval(methodName, interval); //间隔时间单位为毫秒,表示每隔interval毫秒执行后都会执行一次方法methodName

执行的方法可以带参数,但是参数只能是字符串、数字类的,不能是对象

实例代码:

 1 <html>
 2     <head>
 3         <title>标题</title>
 4         <meta charset="utf8"/>
 5         <script type="text/javascript">
 6             //测试setTimeout
 7             var runTimeout, runInteval;
 8             function TestTimeout(idName){
 9                 if (!idName) idName = "showInfo";
10
11                 document.getElementById(idName).innerText = (new Date()) + ", runTimeout = " + runTimeout;
12                 runTimeout = setTimeout("TestTimeout(‘showInfo‘)", 1000); //一秒后执行
13                 //或者写作:runTimeout = setTimeout(TestTimeout, 1000); //一秒后执行
14             }
15
16             function TestClearTimeout(){
17                 clearTimeout(runTimeout);
18                 runTimeout = null;
19                 document.getElementById("showInfo").innerText = "setTimeout()停止了,  runTimeout = " + runTimeout;
20             }
21
22             //测试setInterval
23             function ChangeTime(idName){
24                 document.getElementById(idName).innerText = (new Date()) + ", runInteval = " + runInteval + ", runTimeout = " + runTimeout;
25             }
26
27             function TestInterval(){
28                 if (runInteval){
29                     return;
30                 }
31                 runInteval = setInterval("ChangeTime(‘showInfo2‘)", 1000); //每过一秒就调用ChangeTime()方法
32                 //或者写作:runInteval = setInterval(ChangeTime, 1000);//需要带参数的话就用上面那种写法
33             }
34             //停止setInterval
35             function TestClearInterval(){
36                 clearInterval(runInteval);
37                 runInteval = null;
38                 document.getElementById("showInfo2").innerText = "setInterval()停止了,  runInteval = " + runInteval;
39             }
40
41
42         </script>
43     </head>
44     <body>
45         <h3 id="showInfo"></h3>
46         <h3 id="showInfo2"></h3>
47         <input type="button" value="测试timeout" onclick="TestTimeout()"/>
48         <input type="button" value="停止timeout" onclick="TestClearTimeout()"/>
49         <input type="button" value="测试interval" onclick="TestInterval()"/>
50         <input type="button" value="停止interval" onclick="TestClearInterval()" />
51     </body>
52 </html>

时间: 2024-08-25 03:41:28

setTimeout和setInterval的相关文章

setTimeout()与setInterval()——走马灯效果

JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作. 但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作:setTimeout()只延时指定时间后执行该操作,且只执行一次. setTimeout()在某种情况下也能实现setInterval()的效果,比较经典的例子就是在在函数内部调用自己.向下面这样: function example(){ ... setTimeout("example()", 1000);

js setTimeout 与 setInterval 以及 for 循环 刷新UI

1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式:执行一次: 如果需要执行多次,自身再次调用 setTimeout(): 示例:无穷循环并带停止按钮的 <html> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTim

JS中的setTimeout和setInterval的区别

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

setTimeout与setInterval的区别

setTimeout与setInterval的区别:1.setTimeout设置后隔指定时间后只会执行一次2.setInterval设置后会每隔指定时间执行一次3.setTimeout一般在方法内部使用达到循环调用的效果4.setInterval一般在方法外部使用就可以达到循环调用效果 setTimeout例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

setTimeout()与setInterval()方法区别介绍

计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助 计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别. setTimeout(): 在js手册中的解释:用于在指定的毫秒数后调用函数或计算表达式: 也就是说在执行完设定好的秒数后再执行. 代码如下: setTimeout(function(){ $("body").css("backgrou

setTimeout与setInterval方法的区别

setTimeout与setInterval方法的区别 setTimeout()用于设定在指定的时间之后执行对应的函数或代码.,在全局作用域下执行 setTimeout(code,time[,args…]) code: 需要执行的函数或js代码,等待的时间,args:参数 如:function sayHello(name, age){ //在5秒钟后弹出提示信息"我叫CodePlayer,今年18岁!". alert("我叫" + name + ",今年&

Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval

定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTimeout('语句',毫秒); //指定毫秒后执行一次语句 [例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

QML中实现setTimeout和setInterval

Qt的QML中,js未提供setTimeout和setInterval,可以通过下面的代码实现. Timer {id: timer} function setTimeout(cb,delayTime) { //timer = new Timer(); timer.interval = delayTime; timer.repeat = false; timer.triggered.connect(cb); timer.start(); } https://my.oschina.net/lieef

Javascript异步编程之setTimeout与setInterval详解分析(一)

Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程( 注意: 特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛多多原谅!) 1. setTimeout与setInterval详细分析基本原理. 接下来这篇博客会总结setTimeout和setInterval基本点,对于上面三点会分三篇博客分别来总结,对于知道上面三点的人,但是又不是非常了解全面知识点的码农来说,没有关系的,我们可以慢慢来学习,来理解,或

js中setTimeout与setInterval

setTimeout和setInterval javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中 以下方法都是window对象的方法: setTimeout() 和 clearTimeout() setInterval() 和 clearInterval() 一.使用时注意作用域 如果需要在对象内部用定时器执行该对象的某一方法时就需要注意了