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 相关文章推荐
checkbox勾选判断代码分析
Jun 11 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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
php通过ajax实现双击table修改内容
2014/04/28 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python中内建函数的简单用法说明
2016/05/05 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
三八红旗手先进事迹材料
2014/05/13 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书