为什么在Chrome Dev Console上出现“ Uncaught ReferenceError：未定义$”错误？

Question

我正在尝试在Chrome开发者控制台中运行一个简单的JQuery脚本，但是出现问题。

当我在Chrome开发者控制台上运行此代码时，此代码没有问题：

var someValue = $("[name='Jack']");
if(someValue !== null){
   console.log("Jack is here!");
}

但是，尝试在setTimeout函数中运行相同的代码时出现错误，如下所示：

setTimeout(function(){
   var someValue = $("[name='Jack']");
   if(someValue !== null){
      console.log("Jack is here!");
   }
}, 1000);

未捕获的ReferenceError：未定义$

这不仅在setTimeout函数中发生，在正常函数中也发生。

我正在使用最新版本的Google Chrome。 如何在setTimeout函数中使用上述JQuery？

Answer 1

这里的混乱集中在$是Chrome命令行API的一部分这一事实上。 在代码中使用$时，是指名为$的命令行API函数。 您可能根本没有加载jQuery：的确，您的someValue !== null代码无论如何都无法与jQuery一起使用。 您需要测试一个非空的jQuery对象（ someValue.length > 0 ），而不是一个非null 。

至于为什么可以在控制台中访问Chrome的$而不是setTimeout回调的原因：这似乎是特定于引擎的魔术，将命令行API限制为仅控制台代码。 setTimeout以这样一种方式执行其回调，即Chrome无法确定代码是否源自控制台，因此它不会授予对名为$的命令行API函数的访问权限。 奇怪的是，这不是JavaScript的典型特征。 使用正常的JavaScript作用域规则，无论执行的时间和位置如何， setTimeout回调都应可以访问与周围代码相同的变量。 一秒钟后范围就不同了，这一事实令人惊讶-您感到困惑是正确的！

---

出于好奇，在香草JavaScript中对此进行模拟的方法是使用基于对象的作用域， with在命令完成后进行更改。 例如，如果您在控制台中键入的每个代码段都包含以下内容：

var chromeConsoleAPI = { $: function() { ... } }
with(chromeConsoleAPI) {
    // your snippet here
}
delete chromeConsoleAPI.$;

在这种情况下，通过访问作用域链上的chromeConsoleAPI对象来提供$ 。 普通代码可以访问$ ，但是由于setTimeout函数在删除chromeConsoleAPI.$之后运行，因此找不到名为$任何内容。 注意，这仍然不能完全复制行为，因为这会阻止对任何用户定义的$访问。 实际上，命令行API必须将其功能注入作用域链的最顶部（即，最远程）。

Answer 2

该问题是因为在加载您的自定义代码之后，将加载Jquery库。

您是否使用外部js文件作为自定义脚本？ 然后，将脚本加载到jquery脚本下。

您必须先添加jquery库链接，然后添加脚本。