将函数而不是字符串传递给 setTimeout() 和 setInterval() - Javascript

在使用 JavaScript 中的 setTimeout() 和 setInterval() 函数时，很多人都使用字符串作为第一个参数。然而，这种做法已经过时了。从 ES6 以后，我们可以将函数直接传递给这些函数，来避免一些问题。

为什么应该避免使用字符串？

使用字符串作为 setTimeout() 和 setInterval() 的第一个参数，可能会导致一些问题。其中一些问题如下：

• 可读性：使用字符串参数可能会让代码难以理解。
• 效率：传递字符串参数需要更多的解析和计算时间。
• 安全：使用字符串参数有可能引入安全漏洞。

下面是一个使用字符串作为 setTimeout() 的例子：

setTimeout("console.log('hello world!')", 1000);

这个例子，虽然可以起到延迟输出 "hello world!" 的作用，但是我们可以看到，使用字符串作为参数会降低代码的可读性。此外，由于需要额外的解析时间，它还会影响代码的性能。

以后，我们将使用语法糖的方式直接将一个函数传递给 setTimeout()。

setTimeout(() => console.log('hello world!'), 1000);

这个例子，与之前的例子功能相同，但是我们可以看到，使用函数作为参数可以使代码更加易于阅读。另外，由于无需解析字符串，也更加高效。

使用函数作为 setTimeout() 和 setInterval() 参数

如果我们希望在一定的时间间隔后执行一个函数，可以使用 setTimeout() 或 setInterval()。

setTimeout()

setTimeout() 是一个全局函数，它可以在一定的时间间隔后执行指定的函数。

setTimeout() 函数接受两个参数：

• 第一个参数是要执行的函数。
• 第二个参数是延迟的时间，以毫秒为单位。

下面是一个使用 setTimeout() 的例子：

function sayHello(name) {
  console.log("Hello, " + name);
}
setTimeout(sayHello, 1000, "Alice");

在这个例子中，我们定义了一个叫做 sayHello() 的函数，然后将其作为参数传递给 setTimeout() 函数，并指定了 1000 毫秒的延迟时间，最后我们传递了一个字符串参数 "Alice" 给 sayHello() 函数。

我们可以看到，使用函数作为参数不仅可以使代码更加易于阅读，还可以为我们提供更多的灵活性。

setInterval()

与 setTimeout() 类似，setInterval() 函数也可以在一定的时间间隔后重复执行指定的函数。

setInterval() 函数接受两个参数：

• 第一个参数是要执行的函数。
• 第二个参数是时间间隔，以毫秒为单位。

下面是一个使用 setInterval() 的例子：

let i = 0;
let timer = setInterval(function() { console.log(i++); }, 1000);

在这个例子中，我们定义了一个变量 i，然后将一个匿名函数作为参数传递给 setInterval() 函数，并指定了 1000 毫秒的时间间隔，最后将返回值赋给一个变量 timer。

在这个例子中，我们将 console.log() 函数嵌套在一个匿名函数中，来确保它不会立即执行。我们还可以通过变量 timer 来清除定时器。

clearInterval(timer);

总结

在使用 setTimeout() 和 setInterval() 函数时，我们应该避免使用字符串作为参数。通过直接传递一个函数，我们可以提高代码的可读性，同时还可以提高代码的效率和安全性。