SetTimeout - 为什么传递函数比传递字符串更好？ [复制]

Question

我用过

setTimeout('InitData()', 100);

但是 JSHint 告诉我“使用函数比使用字符串更好”，我将其更改为：

setTimeout(function () { InitData() }, 100);

但为什么会这样呢？

Answer 1

有几个原因。

1. 首先，当您传递setTimeout 一个字符串时，该字符串会在全局上下文中进行评估。这意味着它调用的函数必须是全局函数。避免全局变量是一种很好的做法。

   例如，这会失败：Live Example （查看控制台中的错误）

   (function() {
      "use strict";
   
      setTimeout("display('hi');", 0);
   
      function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
   })();
   

   ...因为display 不是全局函数。

   但这有效：Live Example

   (function() {
     "use strict";
   
     setTimeout(display.bind(null, 'hi'), 0);
     // Or:
     // setTimeout(function() { display('hi'); }, 0);
   
     function display(msg) {
       var p = document.createElement('p');
       p.innerHTML = String(msg);
       document.body.appendChild(p);
     }
   })();
   

2. 使用函数引用而不是字符串意味着我们使用的是相同的语义，我们在使用回调的其他任何地方都使用了相同的语义，而不是调用setTimeout 一些奇怪的特殊事物.例如，我给addEventListener 一个在事件发生时调用的函数的方式与我给setTimeout 一个在它超时时调用的函数的方式相同。一致的语义有助于避免错误。

3. 使用函数引用而不是字符串可以让我非常具体地了解我正在调用的函数。考虑：

   function showInASecond(str) {
     setTimeout(function() {
       alert(str);
     }, 1000);
   }
   

   我不能在那里合理地使用字符串。哦，我可以尝试创建一个连接，确保转义我必须在 str 中转义的所有内容（如引号、反斜杠等），但简单更好。

4. 如果你传递setTimeout 一个字符串，它必须启动一个完整的JavaScript 解析器来评估它。不是什么大问题，但仍然需要做更多的工作。