JavaScript中setTimeout()的具体用法

2024-09-27 00:15:40

setTimeout( ) 是属于 window 的方法, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method

请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。

1、setTimeout( ) 语法例子

<html>
<body text=red>
<h1> <font color=blue> 示范网页 </font> </h1> <p> </br>
<p> 请等三秒钟!
<script>
setTimeout("alert('对不起, 三秒钟已到')", 3000 )
</script>
</body> </html>

2.　留意网页开启后三秒, 就会出现一个 alert 对话盒。

setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)

code/function:必需。要调用一个代码串，也可以是一个函数。

milliseconds:可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。

param1, param2, ... : 可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。　　

这次例子是设定等待 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method，注意这个函数可以由我们自己重新书写。下面就来看一看调用function的方式　

<html>
 <head></head>
 <body text="red">
  <h1><font color="blue"> 示范网页 </font></h1>
  <script>
// setTimeout("alert('出窗')",3000 );
setTimeout("changeState()",3000 );
function changeState(){
  // alert("弹出");
  let content=document.getElementById('content');
  content.innerHTML="<div>这是三秒钟之后</div>";
}
</script>
  <p id="content"> 请等三秒钟!</p>
 </body>
</html>

以上这段代码是实现一个在3秒钟之后进行更换文本的内容，在更换内容的时候调用了方法changeState()方法

3、有了以上基础，我们可以实现一个自动运行的按照时间递加的计数器，如下面所示代码：

<html>
<body text=red>
<h1><font color=blue> 示范网页 </font></h1>
<script>
  var x=0;

  function changeState(){
        x=x+1;
        //注意这里的调用方式，使用引号包围
        setTimeout("changeState()",1000 );
        let content=document.getElementById('content');
         content.innerHTML=x;
         console.log(x);
      }
</script>
<button onclick="changeState()">开始计时</button>
<p>已运行时间</p>
<p id="content"></p>
</body>
</html>

在上面代码中，当点击按钮启动changeState( )后, 就会启动 setTimeout( ), 这个 method 在一秒后又启动 changeState( ), changeState( )启动后又启动 setTimeout( ) , 所以得出的结果是 changeState( )每秒执行一次，继而实现数值的递增。

虽然实现了数值的递增，但是当我们连续点击按钮时，你会发现，数值的增加不是按照1秒增加的（小于1秒），下面，我们进行一些限制条件，比如限制x<60,然后重新开始，在其他位进1，也就是实现钟表计时功能，如下面代码：

<html>
<body text=red>
<h1><font color=blue> 示范网页 </font></h1>
<script>
  var x=00;
  var y=00;
  var z=00;

  function changeState(){
    if(x<=59&&x>=0 && y<=59 && y>=0 && z<=59 && z>=0){
      //注意这里的调用方式，使用引号包围
      let content=document.getElementById('content');
       content.innerHTML=z+":"+y+":"+x;
       console.log(x);
        x=x+1;
    }else if(y<=59 && y>=0 && z<=59 && z>=0){
      y=y+1;
      x=0;
    }
    else if (z<=59 && z>=0) {
      z=z+1;
      y=0;
      x=0;
    }
    setTimeout("changeState()",1000 );
  }
</script>
<button onclick="changeState()">开始计时</button>
<p>已运行时间</p>
<p id="content"></p>
</body>
</html>

实现效果如下所示：

3、既然有开始计时，那么想当然就要有停止计时，那么就需要知道这个函数------clearTimeout( )

有些好奇宝宝就会问了，为什么会有停止呢？什么场景会需要停止呢？

比如，当我们做了某项操作后，而这个操作会在几秒钟后延迟执行，但是我们在关闭页面后，我们可能就不需要在执行这个操作了，所以我们可以在关闭页面或者卸载组件的时候，将这个延迟时间取消掉。

setTimeout( ) 来使到浏览器不断执行一个 function, 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这 method。
clearTimout( ) 有以下语法:　clearTimeout(timeoutID)

要使用 clearTimeout( ), 我们设定 setTimeout( ) 时, 要给予这 setTimout( ) 一个名称, 这名称就是 timeoutID , 我们叫停时, 就是用这 timeoutID来叫停, 这是一个自定义名称,。
如下:

timeoutID
　↓
meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)

使用这 meter1 及 meter2 这些 timeoutID 名称, 在设定 clearTimeout( ) 时, 就可指定对哪一个 setTimeout( ) 有效, 不会扰及另一个 setTimeout( ) 的操作。

如下所示，停止的语句（注意：count1(),count2()分别是计时开始的方法，而meter1,meter2分别是setTimeout的定义）

<html>
 <head>
  <script>
x = 0
y = 0

function count1( )
{　x = x+ 1
　 document.display1.box1.value= x
　 meter1=setTimeout("count1()", 1000)
}

function count2( )
{　y = y+ 1
　 document.display2.box2.value= y
　 meter2=setTimeout("count2()", 1000)
}
</script>
 </head>
 <body bgcolor="lightcyantext=red">
  <p> <br /> </p>
  <form name="display1">
   <input type="text" name="box1" value="0" size="4" />
   <input type="button" value="停止计时" onclick="clearTimeout(meter1)" />
   <input type="button" value="继续计时" onclick="count1() " />
  </form>
  <p> </p>
  <form name="display2">
   <input type="text" name="box2" value="0" size="4" />
   <input type="button" value="停止计时" onclick="clearTimeout(meter2) " />
   <input type="button" value="继续计时" onclick="count2( ) " />
  </form>
  <script>
count1( )
count2( )
</script>
 </body>
</html>

4、设置点击一次标志---　Set flag

前个练习说到我们用一个按钮来启动一个 function, 每按一下就会启动这 function 一次, 请看以下例子。

在这例子有以下设定:
1.　程序开启时 flag=0。
2.　当 counter( ) 执行时会顺便将 flag 变为 1。
3.　在 [继续计时] 这按钮的反应中, 会先检查 flag 是 0 或是 1, 若是 0 就会产生作用, 若是 1 就没有反应。
4.　使用这 flag 的方式, count( ) 这 function 开启后, [继续计时] 这按钮就没有作用。

这处的 flag 是一个变数, 可任意取名, 我们用 flag来称呼这变数的原因, 是因为这变数好处一支旗, 将旗竖起 (flag is on), 就会产生一个作用, 将旗放下 (flag is off), 就产生另一个作用。
练习---只可开启一次的 function

这练习是将上个练习加多一个 flag, 使到每次只能有一个 count( ) 这 function 在进行。

以下内容:

<html>
 <head>
  <script>
x = 0
flag = 0
function count( )
{　x = x+ 1
　 document.display.box.value= x
　 timeoutID=setTimeout("count()", 1000)
　 flag = 1
}

function restart( )
{　if (flag==0)
　　　{　count( )　}
}
</script>
 </head>
 <body bgcolor="lightcyantext=red">
  <p> <br /> </p>
  <form name="display">
   <input type="text" name="box" value="0" size="4" />
   <input type="button" value="停止计时" 　　onclick="clearTimeout(timeoutID);flag=0" />
   <input type="button" value="继续计时" onclick="restart() " />
  </form>
  <p> <script>
count( )
</script> </p>
  <form>
   <input type="button" value="Show flag" onclick="alert('The flag now is '+ flag)" />
  </form>
 </body>
</html>

效果说明：

1.　在网页中, 你应该能看到三个按钮及文字框中的数字跳动。
2.　请你按 [Show flag]这按钮, 应见到一个话对盒显示 flag 是 1。
3.　请你按 [停止计时]这按钮, 数字停止跳动, 请你按 [Show flag] 这按钮, 应见到话对盒显示 flag 是 0。
4.　请你按多次 [继续计时]这按钮, 你应见到数字不会加快, 请你按 [Show flag]这按钮, 应见到话对盒显示 flag 变回 1。

代码解析：

1.　这网页第 5行有这一句: flag=0 , 这是设定 flag 这变量及将初始值定为 0, 你也可将初始值定为 1, 随后有关的 0 和 1 对调。
2.　count( ) 这个 function方法中最后一句是 flag=1 , 所以启动 count( ) 后, flag的状态就会变为 1。
3.　[继续计时] 的按钮是用来启动 restart( ), 这 function 有以下设定:

function restart( )
{　if (flag==0)
　　　{　count( )　}
}

这里的 if statement 检查 flag是否等于 0, 若是 0 就启动 count(), 若是 1 (即不是 0) 就没有反应,使用这方法, 若 count( )已在执行中, [继续计时] 这按钮不会有作用。

这处的 flag=1设定, 实际设为 1 或 2 或 3 等数值都是一样的,只要不是 0 就可以了, 所以这两个相对的标志,看似是 "0" 和 "1", 实际是"0" 和 "non-zero" (非-0)。

4.　[停止计时] 的按钮有以下设定:

onClick="clearTimeout(timeoutID);flag=0"

上面代码是停止 setTimeout( ) 的操作时,同时将 flag 传回 0, 这使到restart( ) 这function 可以重新启动 count()。

注意:下面方法是定时作用,能够按照一定的时间执行相同的操作setInterval

let i =0; setInterval(() => { console.log(i++); },1500);//1000为1秒钟

在上面代码中,每隔1.5秒就会有一次打印,对于这个方法,同样能够实现上面操作中的始终功能,并且代码更加简单.

应该值得注意的是: setTimeout 也有个小细节，第二个参数设置为 0 也许会有人认为这样就不是异步了，其实还是异步。这是因为 HTML5 标准规定这个函数第二个参数不得小于 4 毫秒，不足会自动增加。

到此这篇关于JavaScript中setTimeout()的具体用法的文章就介绍到这了,更多相关JavaScript setTimeout()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Javascript的setTimeout()使用闭包特性时需要注意的问题

setTimeout经常被用于延迟执行某个函数,用法为: 复制代码代码如下: setTimeout(function(){ - }, timeout); 有时为了进行异步处理,而使用setTimeout(function-,0):比如: 复制代码代码如下: function f(){ - // get ready setTimeout(function(){ -. // do something }, 0); return -; } 在setTimeout设定的函数处理器之前,函数f返回
javascript的setTimeout()使用方法总结

目录 1.前言 2.setInterval与setTimeout的区别 3.setTimeout 4.setTimeout的用法 5.clearTimeout( ) 6.结尾 1.前言 js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料.今天对js的setTimeout方法做一个系统地总结. 2
javascript setTimeout()传递函数参数(包括传递对象参数)

于是,上网查找了一下,用了另一种写法setTimeout("fun("+参数+")", 1000),还是不行,但是以上写法在传递form表单的textarea是可以的,比如hml是这样: 复制代码代码如下: <body> <div class="main"> <div id="showpane" class="showpane"> </div> <di
js中setTimeout()与clearTimeout()用法实例浅析

本文实例分析了js中setTimeout()与clearTimeout()用法.分享给大家供大家参考.具体分析如下: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout. <input type = text id = aaa > <input type = button value = stop id = bb onclick = bb()> <scrip
JavaScript定时器setTimeout()和setInterval()详解

本文实例为大家分享了JavaScript定时器的具体方法,供大家参考,具体内容如下 1. 超时调用setTimeout() 顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒) setTimeout()他可以接收两个参数: 1.要执行的代码或函数 2.毫秒(在执行代码之前要等待多少毫秒) function test(){ alert("孙悟空"); } setTimeout(test,2000); //2s后弹出 "孙悟空" clearTi
JavaScript setTimeout()基本用法有哪些

在制作网页动态效果时,可能会遇到需要延时在执行的需求,这时就可以用到 js 中定时器来实现此类需求,本文将对setTimeout()做一个用法总结. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式(以毫秒为单位) setTimeout()只执行函数一次,如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout() setTimeout()用法举个简单的例子加入下列代码,在打开的页面静候三秒后,弹出警告框"你好" <
实例讲解JS中setTimeout()的用法

本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"&
JS中setTimeout()的用法详解

setTimeout setTimeout 语法例子用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的co
JavaScript window.setTimeout() 的详细用法

js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! setTimeo
JavaScript中setTimeout()的具体用法

setTimeout( ) 是属于 window 的方法, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method 请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法. 1.setTimeout( ) 语法例子 <html> <body text=red> <h1> <font color=blue> 示范网页 </font> </
JS中setTimeout的巧妙用法前端函数节流

什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作.大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如
关于JavaScript中异步/等待的用法与理解

昨天更新的是"JavaScript中的Promise使用详解",其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出.今天就说一说"JavaScript中的async/await的用法和理解" JavaScript中异步/等待的用法和理解编程语言中任意一个关键字都是有意义的,我们先从字面意思来理解. 1.async async 是"异步"的简写,带async关键字的函数,是声明异步函数,返回值是promise对象,如
javascript中闭包概念与用法深入理解

本文实例分析了javascript中闭包概念与用法.分享给大家供大家参考,具体如下: 1.问题的引出,什么时候会遇到闭包? 首先因为JS是没有块状作用域的,但是有函数作用域即函数作为了局部变量之间的界限,不同函数内的局部变量具有独立性, 因为JS没有块状作用域,笔者初学JS时,在事件的监听时,因为不理解JS中局部变量的作用域,犯过不少错误! (1)JS中的变量作用域 for(var i=0;i<9;i++) { } alert(i) //输出9 我们发现,虽然变量i是块状区域for()内的一个局
实例详解JavaScript中setTimeout函数的执行顺序

前言 setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器.其实网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例子并加以解释希望能让大家明白setTimeout是如何执行的.下面话不多说了,来一起看看详细的介绍: 实例代码如下: var time1=new Date().getTime(); console.log(1,time1); setTimeout(function()
JavaScript中的标签语句用法分析

本文实例分析了JavaScript中的标签语句用法.分享给大家供大家参考.具体分析如下: 最近在看w3school,然后看到js部分, <!DOCTYPE html> <html> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; list: { document.write(cars[0] + "<br>
javascript中eval和with用法实例总结

本文实例讲述了javascript中eval和with用法.分享给大家供大家参考,具体如下: 我们都知道javascript的作用域机制,但是with和eval有时会"破坏"我们对于作用域的常规理解.下面参考网上资源和自己理解总结一下eval和with的用法. 一.eval 1.eval函数:把一个字符串当作一个js表达式一样去执行它. 2.语法:eval(strScript) 注:参数strScript是必填项 3.使用说明 (1)它是有返回值的,如果参数字符串是一个表达式,就会返回
javascript中setTimeout使用指南

javascript中setTimeout使用指南 <script> /* //方法1 function slows(){ alert("15S后弹出!"); } setTimeout("slows()",5000); //方法2 function slows(){ alert("15S后弹出!"); } setTimeout(slows,5000); */ //方法3 function slows(){ alert("15
JavaScript中匿名函数的用法及优缺点详解

匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染. 这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美. 一.什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function(

JavaScript中setTimeout()的具体用法

相关推荐

随机推荐