如何理解 JavaScript 中 setTimeout()函数的各种片段？

JavaScript 中的 setTimeout() 函数是一个非常常用的函数，它可以在指定的时间后执行一个指定的函数或一条指定的语句。在使用 setTimeout() 函数时，可能会遇到各种各样的片段，这篇文章将指导你如何理解这些片段。

基础用法

setTimeout(function(){
    console.log('Hello, world!');
}, 1000);

上面的代码会在 1000ms（即 1 秒）后输出 'Hello, world!' 到控制台。setTimeout() 函数的第一参数是一个函数，这个函数会在第二个参数中设定的时间后自动执行。

带参数的函数

setTimeout(function(name){
    console.log('Hello, ' + name + '!');
}, 1000, 'Jack');

上面的代码和基础用法的代码基本相同，只是在第一个函数中加入了一个名为 'name' 的参数，而在 setTimeout() 函数的第三个参数中，我们将 'Jack' 作为传入该函数的参数。所有传入 setTimeout() 函数的额外参数都会在被调用的函数中作为参数传入。

setInterval() 函数

setInterval(function(){
    console.log('Hello, world!');
}, 1000);

除了在一段时间后执行一次指定的函数或语句，JavaScript 还有一个 setInterval() 函数，它可以以指定的时间间隔重复执行一个指定的函数或语句。上面的代码会每隔 1 秒输出一次 'Hello, world!' 到控制台。

内存泄漏

(function(){
    var i = 1;
    setTimeout(function(){
        console.log(i++);
        setTimeout(arguments.callee, 1000);
    }, 1000);
})();

上面的代码输出自增的数字，以区别于 setInterval()。在这个例子中，我们使用了 arguments.callee 来重复调用 setTimeout() 函数。使用 arguments.callee 可以保证函数内永远指向函数本身，不受该函数变量名改变的影响。

但是，这段代码存在着性能上的问题——对内存的泄漏。每次调用 setTimeout() 函数时，都会创建一个新的函数，这样就会一直占用内存，导致浏览器崩溃。解决这个问题的方法是使用 clearInterval() 函数来清除定时器。

结束语

setTimeout() 函数的各种片段都非常实用，但是在使用时需要注意它的性能问题，避免内存泄漏导致浏览器崩溃。通过本文的介绍，相信大家已经理解了 setTimeout() 函数的一些常用片段，能够更好地运用它来开发出更加优秀的 JavaScript 应用程序。