javascript的setTimeout()使用方法总结


Posted in Javascript onNovember 20, 2021

1、前言

jssetTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等。但是很多javascript新手对setTimeout的用法还是不是很了解。虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料。今天对js的setTimeout方法做一个系统地总结。

2、setInterval与setTimeout的区别

说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧!

3、setTimeout

定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。  

语法: setTimeout(code,millisec)  

参数: code (必需):要调用的函数后要执行的 JavaScript 代码串。millisec(必需):在执行代码前需等待的毫秒数。  

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

setInterval:

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法: setInterval(code,millisec[,"lang"])

参数: code 必需。要调用的函数或要执行的代码串。millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

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

区别:

通过上面可以看出,setTimeoutsetinterval的最主要区别是:

setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令,则可循环运行。(即 要循环运行,需函数自身再次调用 setTimeout()

setinterval是循环运行的,即每到设定时间间隔就触发指定代码。这是真正的定时器。

setinterval使用简单,而setTimeout则比较灵活,可以随时退出循环,而且可以设置为按不固定的时间间隔来运行,比如第一次1秒,第二次2秒,第三次3秒。

我个人而言,更喜欢用setTimeout多一些!

4、setTimeout的用法

让我们一起来运行一个案例,首先打开记事本,将下面代码贴入,运行一下效果!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert('对不起, haorooms博客要你等候多时')", 3000 )
</script>

</body> 
</html>

页面会在停留三秒之后弹出对画框!这个案例应用了setTimeout最基本的语法,setTimeout不会自动重复执行!

setTimeout也可以执行function,还可以不断重复执行!

我们再来一起做一个案例:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
  document.haorooms.haoroomsinput.value=x
  setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

我们可以看到input文本框中的数字在一秒一秒的递增!所以,setTimeout也可以制作网页中的时间跳动!

没有案例,学习起来不会很快,我们再来一起做一个例子,计算你在haorooms某个页面的停留时间:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{ y=y+1
  document.displayMin.displayBox.value=y
  setTimeout("countMin()",60000)
}
function countSec()
{ x = x + 1
  z =x % 60
  document.displaySec.displayBox.value=z
  setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留时间是: </td>
<td> 
<form name=displayMin>
   <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> 分 </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> 秒。</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

怎么样,通过上面的例子,对setTimeout()的用法,相信你都了解了吧!

5、clearTimeout( )

我们再来一起看一下 clearTimeout( )

clearTimout( ) 有以下语法 :  

clearTimeout(timeoutID)

要使用 clearTimeout( ) , 我们设定 setTimeout( ) 时 , 要给予这 setTimout( ) 一个名称 , 这名称就是 timeoutID , 我们叫停时 , 就是用这 timeoutID 来叫停 , 这是一个自定义名称 , 但很多人就以 timeoutID 为名。

在下面的例子 , 设定两个 timeoutID, 分别命名为 meter1 及 meter2,

如下 :

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

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

下面请看 clearTimeout()的案例;

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<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> 
<p> </br>
<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>
<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>

6、结尾

到此这篇关于javascript的setTimeout()使用方法总结的文章就介绍到这了,更多相关javascript的setTimeout()用法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript继承之为什么要继承
Nov 10 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
浅析vue component 组件使用
Mar 06 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
JavaScript异步操作中串行和并行
Nov 20 #Javascript
vue中 this.$set的使用详解
如何用vue实现网页截图你知道吗
利用 JavaScript 构建命令行应用
Nov 17 #Javascript
Ajax实现异步加载数据
Nov 17 #Javascript
36个正则表达式(开发效率提高80%)
Nov 17 #Javascript
Javascript 解构赋值详情
Nov 17 #Javascript
You might like
延长phpmyadmin登录时间的方法
2011/02/06 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
vue-property-decorator用法详解
2019/12/12 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
使用Django和Python创建Json response的方法
2018/03/26 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python导入库的具体方法
2020/06/18 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
艺术用品:Arteza
2018/11/25 全球购物
单位未婚证明范本
2014/01/18 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
祝酒词范文
2015/08/12 职场文书
2019同学聚会主持词
2019/05/06 职场文书