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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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 trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
内科护士实习自我鉴定
2013/10/17 职场文书
总经理助理的八要求
2013/11/12 职场文书
质检的岗位职责
2013/11/17 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书