阅读量:0
setTimeout 用于在指定的毫秒数后执行函数，语法为 setTimeout(function, delay)。setTimeout() 用法详解
基本语法
setTimeout(callback, delay, ...args);
callback: 回调函数，将在指定的延迟时间后执行。
delay: 延迟时间（以毫秒为单位）。
...args: 可选参数，传递给回调函数的额外参数。
调用方式
1、不传参的调用方式
```javascript
function sayHello() {
console.log('Hello');
}
setTimeout(sayHello, 1000);
```
在这个例子中，我们定义了一个名为sayHello 的函数，并使用setTimeout 来延迟1秒后执行它，当1秒钟过去后，控制台将输出“Hello”。
2、传参的调用方式
```javascript
function sayHelloSth(name) {
console.log(Hello ${name}!);
}
setTimeout(sayHelloSth, 3000, 'World');
```
在这个示例中，我们定义了一个sayHelloSth 函数，它接受一个参数name，然后我们使用setTimeout 调用这个函数，并在3秒后打印“Hello World!”。
取消延迟执行
当调用setTimeout 时，它会立即返回一个唯一的定时器ID，我们可以使用这个ID来取消延迟执行。
let timerId = setTimeout(function() { console.log('This message will never be displayed'); }, 5000); clearTimeout(timerId);在这个例子中，我们使用setTimeout 创建了一个定时器，并将其赋值给timerId 变量，然后我们立即使用clearTimeout 取消了这个定时器，这意味着在5秒钟后，控制台不会输出任何消息。
应用场景
1、简单延迟
```javascript
setTimeout(function() {
alert('Sorry, you have to wait!');
}, 3000);
```
在这个例子中，页面在开启三秒后会出现一个alert对话框。
2、动态修改页面内容
```html
<p id="content">请等三秒钟！</p>
<script>
setTimeout(function() {
let content = document.getElementById('content');
content.innerHTML = "<div style='color:red'>我是三秒后显示的内容！</div>";
}, 3000);
</script>
```
在这个示例中，网页上的文字会在三秒后修改。
3、计数器
```html
<input type="text" id="displayBox" name="displayBox" value="0">
<script>
let x = 0;
function countSecond() {
x = x + 1;
document.getElementById("displayBox").value = x;
setTimeout(countSecond, 1000); // 每隔一秒调用一次 countSecond() 函数
}
countSecond(); // 执行函数 countSecond()
</script>
```
这个例子中，页面在载入后执行countSecond 函数，该函数内使用了setTimeout 方法，该方法在每隔一秒调用countSecond 函数，所以最终会导致countSecond 每秒执行一次，实现计数效果。
相关问题与解答
1、问题1:setTimeout 的延迟时间是否准确？
答案:setTimeout 的延迟时间并不是准确的，它只是表示最早可能执行的时间，实际执行的时间可能会受到其他代码的影响，比如浏览器的事件循环或其他的定时器。
2、问题2: 如何取消已经设置的setTimeout？
答案: 使用clearTimeout 函数可以取消已经设置的setTimeout，你需要传递setTimeout 返回的定时器ID给clearTimeout 函数，
```javascript
let timerId = setTimeout(function() {
console.log('This will not run');
}, 5000);
clearTimeout(timerId);
```
各位小伙伴们，我刚刚为大家分享了有关“settimeout怎么用？JS中setTimeout()的用法详解”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
