博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript中的两个定时函数setTimeOut()和setInterVal()的区别
阅读量:7026 次
发布时间:2019-06-28

本文共 2133 字,大约阅读时间需要 7 分钟。

js中经常性要用到间隔几秒或暂停几秒执行某个函数,

简单介绍我从网上收集到setTimeOut()和setInterVal()的区别

1、setInterVal()介绍

1)定义

setInterval() 方法可按照指定的周期(以毫秒计)来执行函数或表达式。该方法会不停地循环调用函数,直到使用 clearInterval() 明确停止该函数或窗口被关闭。

clearInterval() 函数的参数即 setInterval() 返回的 ID 值。(也可理解为关闭定时函数的对象)

2)语法

setInterval(code,millisec[,"lang"])

code 必须。要调用的函数或要执行的代码串。(可以直接alert("测试"),也可以是function方法)
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

3)返回值

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

4)用法

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>setInterVal用法</title>
</head>
<script type="text/javascript">
    var num = 0;
    var t;
    //开始计时方法
    function startInterVal(){
        document.getElementById("test").innerHTML = num;
        num = num+1;        
    }
    //setInterVal():按照指定的周期(以毫秒计)来调用函数或计算表达式
     t = window.setInterval("startInterVal()",1000);
    
     //结束计时方法
    function stopInterVal(){
        window.clearInterval(t);
    }
    
</script>
<body>
<form>
<input type="button" value="开始计时" onClick="startInterVal()">
<input type="button" value="结束计时" οnclick="stopInterVal()" />
<div>计时: <span id="test"></span></div>
</form>
</body>
</html>
5)结果视图

 

2、setTimeOut()介绍

1)定义:

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,该方法与 setInterval() 方法不同的是该方法只执行一次。

2)语法:

setTimeout(code,millisec)

code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数,以毫秒计。

3)返回值:

一个可以传递给 Window.clearTimeOut() 从而取消对 code 执行的值(对象)

4)用法:

简单例子

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>setTimeOut用法</title>
<script type="text/javascript">
    var num = 0;
    var t;
    //开始定时方法
    function startTimout(){
        //把数字进行累加赋值给test
        document.getElementById("test").innerHTML = num;
        num = num+1;
        //调用setTimeOut函数
        t= window.setTimeout("startTimout()",1000);
    }
    //清除定时方法
    function StopTimeOut(){
     window.clearTimeout(t);
    }
</script>
</head>
<body>
<form>
<input type="button" value="开始计时" onClick="startTimout()">
<input type="button" value="结束计时" οnclick="StopTimeOut()" />
<div>计时:<span id="test"></span></div>
</form>
</body>
</html>

5) 结果视图:

6)提示:

(1)setTimeout() 虽然是只执行一次代码。但如果许要多次调用,除了使用 setInterval() 外还可以让被执行的代码里面自身再次调用 setTimeout() 方法已达到多次执行的目的。

(2)另外setTimeout()方法也同样可以返回一个ID值,以方便使用clearInterval()方法对使用setTimeout()方法的取消。

 

参考网址:http://www.jb51.net/article/49942.htm

转载地址:http://imoxl.baihongyu.com/

你可能感兴趣的文章
crontab实例分析
查看>>
ASP.NET MVC 3和Razor中的@helper 语法
查看>>
CentOS6、7 LVM逻辑卷分区自动扩容Shell脚本编程思路与实例
查看>>
jQuery1.7.2正式发布了
查看>>
递归遍历目录中的所有文件
查看>>
详解Spring MVC 4之DispatcherServlet
查看>>
改写的日历小程序(Java)
查看>>
Java多线程初学者指南(7):向线程传递数据的三种方法
查看>>
将一列的转换成一行
查看>>
Virtual Machine Manager 2008 2008 R2系列之安装部署
查看>>
软件工厂(Software factory)介绍
查看>>
zabbix常用key和自定义key的讲解
查看>>
让你彻底理解STP的各种角色选举
查看>>
ADO.NET 对象模型
查看>>
linux常用命令使用技巧
查看>>
企业架构 - 开篇:TOGAF介绍
查看>>
Windows数据类型探幽——千回百转你是谁?(4)
查看>>
WCF服务编程设计规范(1):最新版WCF Coding Standard 介绍和下载
查看>>
Apache Segmentaion Fault故障处理案例分析
查看>>
C# 温故知新 基础篇(5) 类<思维导图>
查看>>