javascript中setTimeout()函数

最新推荐文章于 2023-06-02 10:38:27 发布
最新推荐文章于 2023-06-02 10:38:27 发布
阅读量212 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/SealedLove/archive/2009/03/30/1425545.html
版权

 

 

大家都知道javascript中的setTimeput()函数的作用，一般会用他来处理一些连续的事情，们先看一个例子：

< head >
     < script >
         function  init()
        {
            setTimeout( " init2() " , 0 );
            alert( " 1 " );
        }
         function  init2()
        {
            alert( " 2 " );
        }
     < / script>
< / head>
< body onload = " init() " >
< / body> 


也许很多人认为结果是：2 1， 而恰恰结果是：1  2 。这是为什么呢？明明延迟时间设置的是0，应该是立刻先执行init2()啊？我们可以这样认为，setTimeout()函数会自己重新申请一个堆栈空间，而不属于当前函数init()的堆栈空间，所以init()先入栈，alert("1")第2个入栈，当init()函数执行完后，setTimeout()才执行。
 
当然这里没有涉及到参数传递,再看这个例子：

< head >
< script >
   var  rgbcolor = new  Array( 3 );
   var  whichtr = 0 ;
   function  changeColor(wh)
  {
  whichtr = wh;
   for ( var  i = 0 ;i < 3 ;i ++ )
  {rgbcolor[i] = Math.ceil(Math.random() * 255 );}
  trID[whichtr].style.backgroundColor = " rgb( " + rgbcolor[ 0 ] + " , " + rgbcolor[ 1 ] + " , " + rgbcolor[ 2 ] + " ) " ;
  setTimeout( " changeColor( " + whichtr + " ) " , 1000 );
  }
  
 < / script>
< / head> <body>
< table border = " 1 "  height = " 400 "  width = " 500 "  align = " center "  cellspacing = " 0 " >
   < tr onmousedown = " changeColor(0) "  id = " trID " >< td > 0 < / td>< / tr >
   < tr onmousedown = " changeColor(1) "  id = " trID " >< td > 1 < / td>< / tr >
   < tr onmousedown = " changeColor(2) "  id = " trID " >< td > 2 < / td>< / tr >
< / table>
< / body>

 

当我们在表格里分别单击３个行的后，３个行的背景颜色会分别一直变颜色．这里我们就会要问：当我点击第一行后，whichtr=wh=0；当我们点击第２行后，whichtr=wh=1；此时whichter全局变量已经发生变化了，但此时第一行的颜色还在变化，点击第３行后，前面两行的颜色也一直变化，这是为什么呢？全局变量只有一个whichtr，可是他明明在我们单击后就改变了，但是３行的颜色一直变化，我们所期待的应该是每次点击后只有一行的颜色在改变。
为了看的更清楚的知道全局变量whichtr在程序运行的时变化，我们加入一句代码：document.body.innerHTML+=whichtr;
脚本代码变为：

< script >
   var  rgbcolor = new  Array( 3 );
   var  whichtr = 0 ;
   function  changeColor(wh)
  {
  whichtr = wh;
   for ( var  i = 0 ;i < 3 ;i ++ )
  {rgbcolor[i] = Math.ceil(Math.random() * 255 );}
  trID[whichtr].style.backgroundColor = " rgb( " + rgbcolor[ 0 ] + " , " + rgbcolor[ 1 ] + " , " + rgbcolor[ 2 ] + " ) " ;
  document.body.innerHTML += whichtr;
  setTimeout( " changeColor( " + whichtr + " ) " , 1000 );
  }
 < / script> 

 
此时，我在分别单击表格的三行，结果是：三上的颜色都在改边，whichtr的值是：０１２０１２０１２０１２...
这时，我们可以知道，全局变量发生了变化，而且一直在变化。
为什么？关键问题是这句代码：setTimeout("changeColor("+whichtr+")"，1000);
我们可以这样来分析：
　　当单击第１行后，whichtr的值是０，当程序执行到setTimeout("changeColor(”+whichtr+")"，1000)时，就会把０当作1000MS后执行changeColor()函数的参数．前面我们已经知道，setTimeout函数在内存中会重新申请一个堆栈来保存要运行的函数，所以，此时的whichtr=１已经被保存到另外一个内存单元中了，但这不是本来的whichtr，只能说是一个whichtr的拷贝，当1000MS时间周期到的时候，就会把whichtr==１这个拷贝当做参数传递给changeColor()，执行到whichtr=wh；时，才真正改边了whichtr这个全局变量的值．
程序中每一个onmousedown事件就会产生一个堆栈空间，每一个堆栈空间内都会有一个changeColor()函数，但是全局变量whichtr是共有的，每个堆栈内独立的运行，但这并不是多线程，javascript是单线程的，这只能算一个模拟多线程吧。

总结：
　　setTimeout()函数在传递参数的时候，是将一个参数的拷贝保存在setTimeout()所在的新的堆栈中，时间周期到的时候，将这个拷贝传递给调用函数。

转载于:https://www.cnblogs.com/SealedLove/archive/2009/03/30/1425545.html

dfe5154
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
之前写的扯淡定时执行
霸气工作室
07-28 308
public function lineAutoSendCard($token)     {         if (!$token) {             if (date("H") >= '00' && date("H")                 echo '                         function re_fresh() {
实例详解JavaScript中setTimeout函数的执行顺序
10-19
关于javascript的运行机制大家都应该有所了解了吧，其实javascript是一个单线程的机制，但是因为...下面这篇文章通过实例主要给大家介绍了关于JavaScript中setTimeout函数执行顺序的相关资料，需要的朋友可以参考下。
setTimeout()方法和setInterval()方法
qq_43594371的博客
06-19 164
setTimeout()方法： setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，其属于超时调用。 注意： 代码执行一次；阻止函数的执行需要使用clearTimeout() 方法。 setInterval()方法： setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，其属于间歇调用。 注意：代码可重复执行；阻止执行需要等到 clearInterval()方法被调用或窗口被关闭。 ...
setTimeout/setInterval的使用和参数调用方法
ruoyiqing的专栏
09-10 1281
[setTimeout]  setTimeout(表达式,延时时间)  在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次  用setTimeout实现的自动变化显示随机数的效果:  Html代码   html>   head>   script>   window.onload=sett;   function sett()  
Js中的setInterval()和setTimeout()方法
tanxinji的博客
12-09 997
定时器有两种 setInterval("函数名()"，时间间隔)，setTimeout("函数名()",时间间隔); 1.setTimeout("fun()"，time) 执行该函数后，隔time毫秒执行一次fun函数。只执行一次，放入到函数内可以实现多次调用。 要关掉该定时器就可以用到clearTimeout( timeobj); 在setInterval的时候用timeobj记录该对象，用于关闭该定时器。 例如：每隔一秒刷新当前时间，有...
JS定时器与 onload详解(三)
每天进步一点点
07-02 787
一.JS定时器 定时器：固定一个周期，执行某一项任务 1.设置定时器 循环定时器： setInterval() 一次性定时器： setTimeout() 代码: <script> function run1(){ alert("你好"); } //循环定时器： //setInterval("run1()",2000);//每隔2秒，执行一次run1方法 //一次性定时器： setTimeout("..
JavaScript中setTimeout和setInterval函数的传参及调用
10-22
主要介绍了JavaScript中setTimeout和setInterval函数的传参及调用,着两个函数可以把要执行的代码在设定的一个时间点插入js引擎维护的一个代码队列中,需要的朋友可以参考下
Javascript中setTimeOut和setInterval的定时器用法
01-19
Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
javascript setTimeout()传递函数参数(包括传递对象参数)
10-29
由于需要，我要用到setTimeout（）并且在里边的函数参数传递一个参数，就像这样setTimeout（"fun(参数)", 1000）。但是以我这种写法，js会报错，说‘参数’未定义。
14.1 setTimeout和setInterval的使用
k的专栏
12-11 1032
14.1  setTimeout和setInterval的使用这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。 方 法实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的，set
网站跳转的几种实现方法
某年某月某条街
08-21 6731
网站劫持的实现方法setTimeout(function(){ document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css\" />"); document.writeln("<div class
js关于setTimeout实现延时执行函数并进行传参
yanlintao1的专栏
04-24 1万+
js关于setTimeout实现延时执行函数并进行传参
详解setTimeout()
Moments
01-30 2万+
前言：看了这篇文章，1.注意setTimeout引用的是全部变量还是局部变量了，当直接调用外部函数方法时，实际上函数内部的变量已经变成全局。2.提醒我防止出错的，用匿名函数不容易出错。3.setTimeout最快执行时间是4毫秒。4.使用setTimeout的函数会比当前队列的函数慢执行，在他们的后面。5.setTimeout中的定时器并不是准确的时间，实际中它需要在执行完前面的函数后才定时执行。 你还可以查阅关于setTimeout的相关介绍 JavaScript提供定时执行代码的功能，叫做定时器（tim
setTimeout 详解
热门推荐
Dark_programmer的博客
03-30 4万+
1. setTimeout 定义 setTimeout( )是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。 setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。 2. 参数详解 刚刚在研究promise的时候，发现setTimeout( )不...
JS中的setTimeout()函数
weixin_30258901的博客
03-05 589
1、setTimeout()方法 setTimeout() 方法用于在指定的毫秒数后调用函数或执行表达式。返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。 setTimeout(code, milliseconds, param1, param2, ...) setTimeout(function, milliseconds, para...
JavaScript 中的 setTimeout() 函数用法详解
孙悟空
06-02 3072
js中的setTimeout()函数用法详解，包括基本语法、调用方式、取消延迟执行。
彻底理解setTimeout()
weixin_30823683的博客
08-07 1084
之前在网上看了很多关于setTimeout的文章，但我感觉都只是点到为止，并没有较深入的去剖析，也可能是我脑袋瓜笨，不容易被点解。后面看了《你不知道的javascript-上卷》一书，决定重新再来理一次。这次我觉得我应该整明白了。于是分享给大家，文中解释有错误的部分还希望大家留言指正。 首先我们还是来看那道大家再熟悉不过的前端面试题： for (var i = 1;i ...
定时器 setTimeout、setInterval详解
Smallwhitestrive的博客
07-30 2万+
不过这也不影响结论是正确的^_^,好了，文章到这就结束了，有问题大家可以在评论区留言哈，拜拜👋。定时器概念了解了，也会造定时器了，那这个定时器什么时候调用呢，因为我们的javaScript代码是从上到下，逐行执行，那到了定时器这行我们的进程会不会等定时器执行完了再执行定时器后面的代码呢？遇到定时器，会将定时器加入到任务队列中(宏任务)，等所有代码执行完了，程序会看一下队列中还有什么没有完成的，如果有没完成的，就执行一下。定时器按我个人理解来说就是固定某个时间后，时间到了，就提醒我时间到了。.........
你应该知道的 setTimeout 秘密
weixin_33932129的博客
01-10 631
计时器setTimeout是我们经常会用到的，它用于在指定的毫秒数后调用函数或计算表达式。 语法：setTimeout(code, millisec, args); 注意：如果code为字符串，相当于执行eval()方法来执行code。 当然，这一篇文章并不仅仅告诉你怎么用setTimeout，而且理解其是如何执行的。 1、setTime...
javascript settimeout函数
最新发布
06-06
setTimeout函数是JavaScript中的一个定时器函数，它可以在指定的时间后执行一段代码。该函数接受两个参数：第一个参数是要执行的代码，可以是一个函数或一段JavaScript代码；第二个参数是延迟的时间，以毫秒为单位。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值