深入理解setTimeout函数和setInterval函数攻略
JavaScript 的 setTimeout 和 setInterval 函数是在开发中经常使用的工具,它们都可以用来延时执行某些代码。虽然看上去它们很简单,但是深入理解它们的原理和用法确实很重要,本文将从下面三个方面进行介绍:
- setTimeout 和 setInterval 函数的基本用法。
- setTimeout 和 setInterval 函数的参数详解。
- 实例演示和示例解析。
基本用法
setTimeout 和 setInterval 函数的作用是延时执行一个或多个函数,并返回一个可用于取消执行的标识符。setInterval 函数会在指定的延迟时间后重复执行,而 setTimeout 函数只会执行一次。它们的语法如下:
setTimeout(func, delay);
setInterval(func, delay);
其中,func
参数是需要延迟执行的函数,delay
参数是延迟的时间,以毫秒为单位。
参数详解
我们可以通过 setTimeout 和 setInterval 函数的参数来更加精确地控制函数的执行时间。下面是参数的详细介绍:
setTimeout 和 setInterval 函数返回的 ID
在 JavaScript 中,setTimeout 和 setInterval 函数会返回一个表示计时器的唯一 ID 的值。您可以使用此 ID 来停止其执行。
var myVar = setInterval(function(){ console.log("Hello"); }, 3000);
clearInterval(myVar);
传递参数给setTimeout 和 setInterval 函数
setTimeout 和 setInterval 函数可以接受两个以上的参数。除了上述的func
和 delay
参数外,后面还可以添加参数,这些参数会作为函数参数在延迟时间到达后传递给函数。
function sayHello(name) {
console.log(`Hello ${name}`);
}
setTimeout(sayHello, 3000, "Bob");
this 关键字和 setTimeout/setInterval 函数
由于 JavaScript 中的 this 关键字的值会随着执行环境的不同而不同,因此在使用 setTimeout 和 setInterval 函数时,this 关键字的值也会发生变化。这意味着,回调函数中的 this 关键字可能会指向一个不同的对象或可能是 undefined。
var myObj = {
count: 0,
start: function() {
var that = this;
setInterval(function() {
that.count++;
console.log(that.count);
}, 1000);
}
};
myObj.start();
实例演示和示例解析
下面是两个示例,可以帮助您更好地理解 setTimeout 和 setInterval 函数的用法。
示例一: countdown
<button onclick="countdown(10)">Start countdown</button>
<p id="demo"></p>
<script>
function countdown(start) {
var counter = start;
var id = setInterval(function() {
document.getElementById("demo").innerHTML = counter;
counter--;
if (counter < 0) {
clearInterval(id);
document.getElementById("demo").innerHTML = "Done";
}
}, 1000);
}
</script>
这个函数会从传递给它的数字开始倒计时。该函数使用 setInterval 函数来保存一个 ID;一旦倒计时结束,它将清除这个 ID 并在页面上显示 Done。
示例二: createTable
<button onclick="createTable()">Create table</button>
<div id="demo"></div>
<script>
function createTable() {
var table = document.createElement("table");
var rows = 4;
var cols = 4;
for (var r = 0; r < rows; r++) {
var row = table.insertRow(r);
for (var c = 0; c < cols; c++) {
var cell = row.insertCell(c);
cell.innerHTML = "hello";
}
}
document.getElementById("demo").appendChild(table);
setTimeout(function() {
table.style.background = "yellow";
}, 2000);
}
</script>
这个函数使用了 setTimeout 函数来改变一个表的背景色。该函数创建了一个表格,并用一个 for 循环为表格添加行和列。然后,它将表格添加到网页的 DOM 中,并在 2 秒钟后将表格的背景色更改为黄色。
小结
通过上述实例和介绍,我们相信您已经更加深入地理解了 setTimeout 和 setInterval 函数的用法和参数,以及如何在代码中使用它们。因此,当您需要延迟执行某些操作时,可以更加轻松地使用这些实用的 JavaScript 函数。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深入理解setTimeout函数和setInterval函数 - Python技术站