为什么Chrome Dev Console上出现“Uncaught ReferenceError：$ is not defined”错误？

Question

我正在尝试在Chrome Developer Console中运行一个简单的JQuery脚本，但我遇到了问题。

在Chrome Developer Console上运行此代码时没有问题：

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

这里的混淆集中在$是的一部分这一事实。在代码中使用$时，您指的是名为$的命令行API函数。您可能根本不加载jQuery：实际上，您的someValue !== null代码甚至无法使用jQuery。您需要测试非空的jQuery对象（someValue.length > 0），而不是非null。

至于为什么 Chrome的$可在控制台中访问，但不能在setTimeout回调中访问：这似乎是特定于引擎的魔法，它将命令行API限制为控制台仅代码。 setTimeout以这样的方式执行其回调：Chrome无法确定代码是否来自控制台，因此它不会授予对名为$的命令行API函数的访问权限。奇怪的是，这不是典型的JavaScript。使用普通的JavaScript作用域规则，setTimeout回调应该可以访问与周围代码相同的变量，无论它在何时何地执行。一秒钟之后范围不同的事实非常令人惊讶 - 你感到困惑是正确的！

作为一种好奇心，在vanilla JavaScript中模拟这种方法的方法是使用with的基于对象的范围，在命令完成后进行变异。例如，如果您输入控制台的每个代码段都包含：

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

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

Answer 2

问题是因为加载了自定义代码后Jquery库加载。

您是否正在使用外部js文件作为您的客户脚本？ 然后在jquery脚本下加载脚本。

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