首页技术文章正文

setTimeout怎么用？setTimeout与setInterval的区别

更新时间:2020年08月24日15时40分来源:传智播客浏览次数:

setTimeout定义和用法

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

语法

setTimeout(code,millisec)

setTimeout()用法

setTimeout 方法接收两个参数，第一个参数为回调函数函数或字符串，第二个参数为触发时间(单位：毫秒)

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

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
param1, param2, ...	可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）

setTimeout()实例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等待3秒演示</title>
</head>
<body>
<h1> <font color=blue>等待3秒钟示演示</font> </h1>
<script>
    setTimeout("alert('对不起, 三秒钟已到')", 3000 )
</script>
</body>
</html>

打开上面代码网页，三秒后就会出现一个 alert 对话盒，提示“对不起, 三秒钟已到”。

settimeout

setInterval()定义和用法

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

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

语法

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

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

代码演示：

//实时刷新时间单位为毫秒
setInterval('refreshQuery()',8000); 
/* 刷新查询 */
function refreshQuery(){
    $("#mainTable").datagrid('reload',null);
}

尽量不要用setInterval()

原因如下：

(1)setInterval()无视代码错误

setInterval有个讨厌的习惯，即对自己调用的代码是否报错这件事漠不关心。换句话说，如果setInterval执行的代码由于某种原因出了错，它还会持续不断(不管不顾)地调用该代码。

(2)setInterval无视网络延迟

假设你每隔一段时间就通过Ajax轮询一次服务器，看看有没有新数据(注意：如果你真的这么做了，那恐怕你做错了;建议使用“补偿性轮询”(backoff polling))。而由于某些原因(服务器过载、临时断网、流量剧增、用户带宽受限，等等)，你的请求要花的时间远比你想象的要长。但setInterval不在乎。它仍然会按定时持续不断地触发请求，最终你的客户端网络队列会塞满Ajax调用。

(3)setInterval不保证执行

与setTimeout不同，你并不能保证到了时间间隔，代码就准能执行。如果你调用的函数需要花很长时间才能完成，那某些调用会被直接忽略。