JavaScript setTimeout 与 setInterval 的区别及传参技巧

核心区别与基本用法

setTimeout 方法用于在指定的毫秒数后调用函数或计算表达式，它只执行一次。执行完毕后，定时器自动销毁。若需实现类似 setInterval 的反复执行功能，需在执行的程序中再次调用自身。

setInterval 方法则按照指定的周期（以毫秒计）来调用函数或计算表达式，它会不停地调用函数，直到调用 clearInterval() 或窗口被关闭为止。

第1步：使用 clearTimeout 清除单个定时器

目的是停止即将执行的单次定时任务。由于 setTimeout 返回一个 ID，可以使用该 ID 来取消执行。

// t 为 setTimeout 返回的 ID
var t = setTimeout('northsnow()', 1000);
clearTimeout(t); // 阻止 northsnow() 执行

第2步：使用 clearInterval 清除循环定时器

目的是停止周期性重复的任务。同样需要使用 setInterval 返回的 ID 进行操作。

// t 为 setInterval 返回的 ID
var t = setInterval('northsnow()', 1000);
clearInterval(t); // 阻止 northsnow() 继续周期执行

语法详解

setTimeout 的标准语法如下：

var timerId = setTimeout("javascript语句", 毫秒数);

• 参数1：含有 JavaScript 语句的字符串（如 alert('5 seconds!')），或者是对函数的调用引用（如 funcName，注意不要加括号）。
• 参数2：指示从当前时间起多少毫秒后执行第一个参数，1000 毫秒等于 1 秒。

示例：5秒后弹出提示框

<html>
<head>
<script type="text/javascript">
function timedMsg() {
  var t = setTimeout("alert('5 seconds!')", 5000);
}
</script>
</head>
<body>
  <form>
    <input type="button" value="运行计时!" onClick="timedMsg()">
  </form>
</body>
</html>

setInterval 的完整语法为：setInterval(code, millisec[, "lang"])。其中 code 是代码字符串或函数引用，millisec 是间隔毫秒数。

示例：每隔5秒弹出“你好”

<html>
<head>
<meta charset="utf-8"/>
<title>setInterval实例</title>
</head>
<body>
<script language="javascript">
  function endo(){
    alert("你好");
  }
  // 每5000毫秒（5秒）执行一次 endo 函数
  window.setInterval('endo()', 5000);
</script>
</body>
</html>

进阶：如何实现带参数的定时调用

在使用函数名作为调用句柄时（即不写引号包裹字符串，也不使用匿名函数），不能直接带参数。例如，试图使用 window.setTimeout(hello(userName), 3000) 会导致 hello 函数立即执行，并将返回值传递给 setTimeout，而非等待 3 秒后执行。

假设存在以下待调用的带参数函数：

var userName = "jack";
function hello(_name) {
  alert("hello," + _name);
}

以下是两种常用的解决传参问题的技巧：

方法 A：使用匿名函数（推荐）

将函数调用包裹在匿名函数中，这样定时器执行的是匿名函数，而匿名函数内部再调用目标函数并传入参数。这是现代 JavaScript 中最清晰的做法。

<script type="text/javascript">
// 循环执行：每隔3秒调用 showalert(“你好！”)
window.setInterval(function(){ 
  showalert("你好！"); 
}, 3000); 

// 定时执行：5秒后调用 showalert(“Hello”)
window.setTimeout(function(){ 
  showalert("Hello"); 
}, 5000);

function showalert(mess) { 
  alert(mess); 
} 
</script>

方法 B：使用高阶函数返回无参函数

如果必须使用函数名形式且环境较老，可以定义一个辅助函数，接收参数并返回一个不带参数的函数。这个返回的函数闭包了外部传入的参数。

<script language="JavaScript" type="text/javascript">
var userName = "jack";
function hello(_name){
  alert("hello," + _name);
}

// 创建一个函数，用于返回一个无参数函数
function _hello(_name){
  return function(){
    hello(_name); // 使用外部参数 _name
  }
}

// 延迟3秒执行，此时 _hello(userName) 返回了一个无参函数句柄
window.setTimeout(_hello(userName), 3000);
</script>

无参数函数的简单调用

当要执行的方法不需要参数时，可直接传递函数名（不加括号），或传递字符串形式的代码。

<script type="text/javascript">
// 循环执行，每隔3秒钟执行一次 showalert()
window.setInterval(showalert, 3000);
function showalert() {
  alert("你好"); 
}

// 定时执行，5秒后执行 show()
window.setTimeout(show, 5000);
function show() {
  alert("Hello");
}
</script>

以上就是 JavaScript 中 setTimeout 和 setInterval 的详细对比及应用技巧，更多关于 JavaScript 定时器资料的关注本站其它相关文章！