如何将变量传入setTimeout？代码无法运行的原因排查

嘿，我来帮你排查问题并解决setTimeout传参的困惑！

一、代码无法运行的常见原因 #

从你给出的代码片段来看，大概率是这几个问题：

• 缺少jQuery依赖：你用了$("#example1")这种jQuery选择器，但如果页面里没有提前引入jQuery库，浏览器会直接抛出$ is not defined的错误，导致代码完全无法执行。
• 语法不完整/错误：你贴的example2函数代码写到$("#...就断了，如果实际代码里存在未闭合的括号、错误的选择器这类语法问题，会直接中断整个JavaScript脚本的运行。
• （可能性较低）函数作用域问题：不过你第一个示例里用的是函数声明（function myfunction()），函数声明会被提升到作用域顶部，所以var whatever = myfunction;这种引用是没问题的，除非你在其他地方不小心覆盖了myfunction变量。

二、正确给setTimeout传递变量的三种方法 #

下面是几种实用的传参方式，你可以根据场景选择：

1. 匿名函数包裹（最直观，兼容性最好） #

用匿名函数把目标函数的调用包裹起来，在里面直接传入变量：

function showCard(elementId) {
  $(elementId).css('visibility', 'visible');
}

// 定义要传递的变量
var targetCard = "#example1";
var delayTime = 200;

// 用匿名函数包裹调用
setTimeout(function() {
  showCard(targetCard); // 这里直接传入变量
}, delayTime);

2. 利用setTimeout的内置参数（ES5+支持） #

setTimeout本身允许在延迟时间之后，添加要传递给目标函数的参数，语法更简洁：

function showCard(elementId) {
  $(elementId).css('visibility', 'visible');
}

var targetCard = "#example2";
var delayTime = 500;

// 第三个及以后的参数就是传给showCard的参数
setTimeout(showCard, delayTime, targetCard);

3. 使用bind绑定参数 #

通过Function.prototype.bind预先把参数绑定到目标函数上，返回一个新函数传给setTimeout：

function showCard(elementId) {
  $(elementId).css('visibility', 'visible');
}

var targetCard = "#example1";
var delayTime = 200;

// bind第一个参数是this指向，这里不需要的话传null即可
setTimeout(showCard.bind(null, targetCard), delayTime);

三、修复后的完整示例 #

这里给你一个能正常运行的完整代码，包含jQuery引入和正确的setTimeout使用：

<!-- 先引入jQuery库，放在你的JS代码之前 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<div id="example1" class="example-card" style="visibility: hidden;">示例卡片1</div>
<div id="example2" class="example-card" style="visibility: hidden;">示例卡片2</div>

<script>
function showCard(elementId) {
  $(elementId).css('visibility', 'visible');
}

// 延迟200ms显示example1
setTimeout(function() {
  showCard("#example1");
}, 200);

// 延迟500ms显示example2，用内置参数方式
setTimeout(showCard, 500, "#example2");
</script>

内容的提问来源于stack exchange，提问作者BACode