setInterval与setTimeout用法

最新推荐文章于 2024-05-29 15:14:06 发布
最新推荐文章于 2024-05-29 15:14:06 发布
阅读量618 收藏
点赞数
分类专栏： 前端3.0分享 文章标签： function javascript object button date input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu2008123/article/details/6714244
版权
 

setInterval与setTimeout的用法

1.setTimeout

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

　　实例：

　　实例1：

　　<html>

　　<head>

　　<script type="text/javascript">

　　function timedMsg()

　　{

　　var t=setTimeout("alert('5 seconds!')",5000)

　　}

　　</script>

　　</head>

　　<body>

　　<form>

　　<input type="button" value="Display timed alertbox!" onClick="timedMsg()">

　　</form>

　　<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>

　　</body>

　　</html>

　　实例2：

　　function clockon(bgclock){

　　var now=new Date();

　　var year=now.getYear();

　　var month=now.getMonth();

　　var date=now.getDate();

　　var day=now.getDay();

　　var hour=now.getHours();

　　var minu=now.getMinutes();

　　var sec=now.getSeconds();

　　var week;

　　month=month+1;

　　if(month<10) month="0"+month;

　　if(date<10) date="0"+date;

　　if(hour<10) hour="0"+hour;

　　if(minu<10) minu="0"+minu;

　　if(sec<10) sec="0"+sec;

　　switch (day){

　　case 1:

　　week="星期一";

　　break;

　　case 2:

　　week="星期二";

　　break;

　　case 3:

　　week="星期三";

　　break;

　　case 4:

　　week="星期四";

　　break;

　　case 5:

　　week="星期五";

　　break;

　　case 6:

　　week="星期六";

　　break;

　　default:

　　week="星期日"

　　break;

　　}

　　var time="";

　　time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec;

　　if(document.all){

　　bgclock.innerHTML="系统公告：["+time+"]"

　　}

　　var timer=setTimeout("clockon("+ bgclock +")",200);

　　}

　　带参数方法使用setTimeout要注意，setTimeout("函数名("+参数+")",毫秒数)，这里的参数只能是字符串形式的，而不能传递一个对象，网上很多朋友也在问此类问题，我在此说明下，以下我举几个个简单的例子：

　　网上查找下“带参数 setTimeout”，很多朋友写了很多方法来实现使用setTimeout带对象的方法循环，例如：

　　<script language="javascript">

　　var __sto = setTimeout;

　　window.setTimeout = function(callback,timeout,param)

　　{

　　var args = Array.prototype.slice.call(arguments,2);

　　var _cb = function()

　　{

　　callback.apply(null,args);

　　}

　　__sto(_cb,timeout);

　　}

　　//测试代码

　　function aaaa(a)

　　{

　　alert(a);

　　}

　　function aaaaa(a,b,c)

　　{

　　alert(a + b + c);

　　}

　　var a = new Object();

　　window.setTimeout(aaaa,1000,a);

　　window.setTimeout(aaaaa,2000,a,6,7);

　　</script>

　　此例中，setTimeout用法，setTimeout(回调函数,时间,参数1,...,参数n)。

　　又例如：

　　<script type="text/javascript">

　　var _st = window.setTimeout;

　　window.setTimeout = function(fRef, mDelay) {

　　if(typeof fRef == 'function'){

　　var argu = Array.prototype.slice.call(arguments,2);

　　var f = (function(){ fRef.apply(null, argu); });

　　return _st(f, mDelay);

　　}

　　return _st(fRef,mDelay);

　　}

　　function test(x){

　　alert(x);

　　}

　　window.setTimeout(test,1000,'fason');

　　</script>

　　此例中，重载了一下window.setTimeout,用apply去回调前面的function。

　　例1：

　　<script language="javascript">

　　function test(obj)

　　{

　　alert(obj);

　　setTimeout("test("+ obj +")",1000);

　　}

　　</script>

　　<input id="testButton" type="button" οnclick="test(1)">

　　当鼠标按下此按钮时调用test()，将"1"传递进去，屏幕上每隔1000毫秒（1秒）弹出一次对话框，显示1，没问题。

　　例2：

　　<script language="javascript">

　　function test(obj)

　　{

　　alert(obj);

　　setTimeout("test("+ obj +")",1000);

　　}

　　</script>

　　<input id="btnTest" type="button" οnclick="test(this)">

　　这里的this可以当做document.getElementById("btnTest")来理解，当鼠标按下此按钮时向test函数传递的是一个对象，屏幕显示[object]，

　　1000毫秒之后不再显示第二次。问题来了，浏览器左下报脚本错误，详细信息里显示object未定义。

　　例3：

　　<script language="javascript">

　　function test(obj)

　　{

　　alert(obj);

　　setTimeout("test()",1000);

　　}

　　</script>

　　<input id="testButton" type="button" οnclick="test(this)">

　　setTimeout里的test()没带参数，第一次显示[object]，1000毫秒之后显示undefined，变量尚未赋值，也就是说用此方式可以实现带参数的方

　　法循环，但是参数被销毁。

　　其实这很简单就可以实现，不必写那么长的代码来实现。

　　例4：

　　<script language="javascript">

　　function test(obj)

　　{

　　alert(obj);

　　setTimeout("test('"+ obj +"')",1000);

　　}

　　</script>

　　<input id="testButton" type="button" οnclick="test(this)">

　　注意，setTimeout里的test中的参数obj前后的引号，在双引号内有一对单引号，这样：setTimeout("test(单引号双引号+obj+双引号单引号)")，行了吧~每隔1000毫秒屏幕显示一次[object]，传递对象成功。

　　疑义：第4条 最终传走的是“对象”的字符串“object” 而不是初始的对象obj。只是obj的类型而已。并没有达到传递对象的作用。

　　可以测试一下代码： 弹出传来对象的id

　　<body>

　　<div id="sssss"></div>

　　</body>

　　<script language="javascript">

　　obj=document.getElementById('sssss');

　　function test(obj)

　　{

　　alert(obj.id);

　　setTimeout("test('"+ obj +"')",1000);

　　}

　　test(obj)

　　</script>

　　第一次弹出了ID 第2次开始未定义。对象传递不成功

　　指定时间跳转到目标页面：

　　setTimeout("location='index.asp'",2000);

 

2.setInterval的用法

编辑本段定义和用法

　　setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

编辑本段语法

　　setInterval(code,millisec[,"lang"])
　　
参数描述
code必需。要调用的函数或要执行的代码串。
millisec必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。

编辑本段返回值

　　一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

编辑本段实例

　　<html>
　　<body>
　　<form>
　　<input type="text" id="clock" size="35" />
　　<script language=javascript>
　　var int=self.setInterval("clock()",50)
　　function clock(){var t=new Date()
　　document.getElementById("clock").value=t
　　}
　　</script>
　　</form>
　　<button οnclick="int=window.clearInterval(int)">Stop interval</button>
　　</body>
　　</html>

编辑本段在flash AS中的用法

　　setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下：
　　setInterval(function,interval[,arg1,arg2,......argn])
　　setInterval(object,methodName,interval[,arg1,arg2,.....argn])
　　第一种格式是标准动作面板中setInterval函数的默认语法，第二种格式是在专家模式动作中使用的方法。其中的参数function是一个函数名或者一个对匿名函数的引用。object参数指定从Object对象派生的对象。 methodName制定object参数中要调用的方法。interval制定对function或methodName调用两次之间的时间，单位是毫秒。后面的arg1等是可选的参数，用于制定传递给function或是methodName的参数。
　　setInterval它设置的时间间隔小于动画帧速（如每秒10帧，相当于100毫秒），则按照尽可能接近interval的时间间隔调用函数。而且必须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果 interval大于动画帧速，则只用在每次播放头进入某一帧是才调用，以减小每次刷新屏幕的影响。
　　下面的例子每隔1秒调用一次匿名函数。
　　setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名的函数。成为匿名函数，后面的1000是时间间隔，单位是毫秒。
　　下面的例子为我们展示如何带参数运行。
　　function show1(){ trace("每隔1秒我就会显示一次");}
　　function show2(str){ trace(str);}
　　setInterval(show1,1000);
　　setInterval(show2,2000,"每隔2秒我就会显示一次");上
　　面已经将函数的setInterval方法介绍了。下面我们将介绍对象的setInterval方法。
　　首先，写一个setInterval在动作中调用对象的方法的例子，该例子不需要传递参数。
　　myobj=new Object();//创建一个新的对象
　　myobj.interval=function){ trace("每隔1秒我就会显示一次");}//创建对象的方法。
　　setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。
　　接下来介绍如何传递参数。其实道理和函数的传递参数是一样的。
　　myobj=new Object();
　　myobj.interval-function(str){ trace(str);}
　　setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");
　　注意。要调用为对象定义的方法时，必须在专家模式中使用第二种语法格式。
　　这样子的话呢，我们来作一个动态显示时间的画面。可以用下面的代码实现。
　　setInterval(show,1000);
　　function show(){
　　time=new Date();
　　hour=time.getHours();
　　minu=time.getMinutes();
　　sec=time.get.Seconds();
　　datetime=hour+":"+minu+":"+sec;}//这里的datetime是一个动态文本框的变量名字。
　　这样子呢，setInterval这个方法大家应该学的很好了。现在呢，我们学习clearInterval. clearInterval动作的作用是清除对setInterval函数的调用，它的语法格式如下
　　clearInterval(intervalid);
　　intervalid是调用setInterval函数后返回的对象。
　　下面举一个简单的例子。
　　function show(){ trace("每隔一秒我就会显示一次");}
　　var sh;sh=setInterval(show,1000);
　　clearInterval(sh);
程序员导航123
关注
专栏目录
定时器（setTimeout和setInterval）
m0_51636525的博客
05-23 596
1.window定时器 ◼ 有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）”。 ◼ 目前有两种方式可以实现：  setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。  setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。 ◼ 并且通常情况下有提供对应的取消方法：  clearTimeout：取消setTimeout的定时器
html 取消settimeout,JavaScript中停止执行setInterval和setTimeout事件的方法
weixin_36290895的博客
06-24 4661
js 代码中执行循环事件时，经常会用到 setInterval 和 setTimeout 这两个方法，关于这两个方法的细节这里不详细讨论了，简要分享下在需要停止循环事件的时候该如何操作。(1)setInterval 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式，停止该方法可使用 clearInterval 方法。具体示例如下：var int=self.setInterval("clock...
js中如何停止或清除timeout定时任务操作的方法
徊忆羽菲
12-29 1万+
js中如何停止或清除timeout定时任务操作的方法设置定时任务取消定时任务 设置定时任务 <button id="button" class="btn btn-success">保存</button> //按钮置灰，等待状态 var time = 25; var timer; function edit_room() { if (time == 0) {//重新获取验证码 $("#button").attr("di
JS【详解】setTimeout 延时（含清除 setTimeout，计时开始时间，0 秒延时解析，多 setTimeout 执行顺序，setTimeout 应用场景，网红面试题）
最新发布
朝阳39的博客
05-29 8103
setTimeout 是一个 js 内置的函数，用于延时执行代码。
停止 setTimeout 延时执行
qq_17627195的博客
06-17 3964
使用 setTimeout() 就可以 var c=0; var i=0; var t; var f; function start(){ if(c < 10){ c++; i++; console.log(`这是第 ${i} 次，c当前值是：${c}`); t=setTimeout("start()",1000); } } function stop(){ // 结束当前循环，t 是 setTimeout() 返
JavaScript SetInterval与setTimeout使用方法详解
12-02
setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的，setInterval在执行完...
js中SetInterval与setTimeout用法.pdf
09-27
JavaScript 中的 SetInterval 与 setTimeout 用法 在 JavaScript 中，SetInterval 和 setTimeout 是两种常用的定时器函数，用于实现延迟执行或重复执行某些操作。本文将详细介绍这两种函数的用法和区别。 ...
JavaScript中SetInterval与setTimeout的用法详解
10-23
在写H5游戏时经常需要使用定时刷新页面实现动画效果，比较常用即setTimeout()以及setInterval()，但是大家对SetInterval与setTimeout的用法了解吗，下面通过本文给大家详解js中SetInterval与setTimeout的用法，需要...
javascript中SetInterval与setTimeout的定时器用法
10-23
它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等，本文文章通过代码示例给大家介绍javascript中SetInterval与setTimeout的定时器用法
清除setTimeout定时器
weixin_38999134的博客
06-08 2321
【代码】清除setTimeout定时器。
js中SetInterval与setTimeout用法
liaojiafan的专栏
11-01 1767
JS里设定延时：使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。setTimeout("function",time) 设置一个超时对象setInterval("function",time) 设置一个超时对象SetInterval为自动重复，setTimeout不会重复。clearTimeout(对象) 清除已设置的
html 取消settimeout,Javascript – setTimeout关闭问题
weixin_39561431的博客
06-24 757
我正在努力解决下面的代码.我尝试了很多不同的方法,但我最终得到了两个不正确的结果之一.for(i = 0; i < result.length; i++) {var tmpBlockInfo = {size: worldTest.data[0].size,xStartPixel : result[i].x * worldTest.data[0].size,yStartPixel : res...
利用setTimeout实现setInterval
darabiuz的博客
02-16 4995
1.定时器的概念介绍 关于定时器要记住的最重要的事情是，指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码 假设有这样一句代码 var btn = document.getElementById("my-btn"); btn.onclick = function(){ setTimeout(function(){ document.getElementById("message").style.visibility = "visible"; }, 250); //其
setTimeout()和setInterval()方法的区别
mrdu_somefun的博客
03-09 335
因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式 所以,完全是不一样的 很多人习惯于将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的 这样,函数外的setTim
js中定时器的使用
weixin_34249678的博客
02-09 127
setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。setTimeout("function",time) 设置一个超时对象 setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式...
setTimeout 深度剖析
热爱思考、活力满满、开朗爱笑的年轻人
05-23 1786
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。 js的setTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等。但是很多javascript新手对setTimeout的用法还是不是很了解
js定时器的设置和清除 setTimeOut()和setInterval()
热门推荐
zhm0303的博客
01-02 7万+
超时调用和间歇调用：二者接受的参数相同，区别只在于:setTimeOut(function(){},1000); 在特定时间之后调用函数，只调用一次setInterval(function(){},1000)；每隔特定的时间调用一次函数，调用n多次,最好不要经常使用tips:递归的方式使用setTimeOut()，效果相当于使用setInterval()function showTime() {
取消递归中的setTimeout
五仁月饼的专栏
02-11 1982
var timeoutID = null;//timeoutID 为setTimeout()产生的id function b(opt){    if(opt)        clearTimeout(timeoutID);//根据timeoutID 取消递归中的setTimeout    else       timeoutID = setTimeout("a()",
JavaScript定时器：SetInterval与setTimeout深度解析
"JavaScript中SetInterval与setTimeout的用法详解" 在JavaScript编程中，`setTimeout` 和 `setInterval` 是两种非常重要的定时器方法，常用于实现动态效果、定时任务和动画。下面将详细介绍这两个方法的用法和区别...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值