I'm trying to run a simple JQuery script in Chrome Developer Console but I have a problem.

There is no problem in this code when I run it on Chrome Developer Console:

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

But, I'm getting an error when try to run the same code inside a setTimeout function like below:

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

Uncaught ReferenceError: $ is not defined

Not only does this happen in setTimeout function, it happens in a normal function as well.

I'm working with latest version of Google Chrome. How can I use JQuery like above in a setTimeout function?

I'm trying to run a simple JQuery script in Chrome Developer Console but I have a problem.

There is no problem in this code when I run it on Chrome Developer Console:

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

But, I'm getting an error when try to run the same code inside a setTimeout function like below:

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

Uncaught ReferenceError: $ is not defined

Not only does this happen in setTimeout function, it happens in a normal function as well.

I'm working with latest version of Google Chrome. How can I use JQuery like above in a setTimeout function?

• javascript
• jquery
• google-chrome
• google-chrome-devtools

Share Improve this question Follow edited Feb 22, 2018 at 18:45 I wrestled a bear once. 23.4k2020 gold badges7272 silver badges122122 bronze badges asked Feb 22, 2018 at 18:10 Firat EskiFirat Eski 67122 gold badges77 silver badges1616 bronze badges 5

• Are you running the setTimeout() function from the console or from a script file? If from a script file, you may be loading your script with the setTimeout() before your JQuery file is loaded. – Ryan Wilson Commented Feb 22, 2018 at 18:13
• No, I'm just using Chrome console. No any script file. – Firat Eski Commented Feb 22, 2018 at 18:14
• 1 Run this in your console first: var script = document.createElement('script');script.src = "https://ajax.googleapis./ajax/libs/jquery/2.2.0/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script); The page you're working probably doesn't load jquery before your code – Emmanuel Commented Feb 22, 2018 at 18:14
• Thanks @EmmanuelNK it worked. I wonder that why it works outside the functions but not inside? – Firat Eski Commented Feb 22, 2018 at 18:22
• 2 @Lujska Because $ is a built-in on the console, but not in other contexts like a setTimeout. – Niet the Dark Absol Commented Feb 22, 2018 at 18:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The confusion here is centered on the fact that $ is part of Chrome's Command Line API. When you use $ in your code, you're referring to the Command Line API function named $. You are probably not loading jQuery at all: indeed, your someValue !== null code wouldn't even work with jQuery anyway. You'd need to test for a non-empty jQuery object (someValue.length > 0), not a non-null.

As for why Chrome's $ is accessible in the console but not a setTimeout callback: this appears to be engine-specific magic that limits the mand line API to console code only. setTimeout executes its callback in such a way that Chrome cannot be sure the code originated from the console, so it does not grant access to the mand line API function named $. Curiously, this isn't typical of JavaScript. Using normal JavaScript scoping rules, the setTimeout callback should have access to the same variables as the surrounding code, regardless of when and where it's executed. The fact that the scope is different one second later is very surprising -- you are right to feel confused!

---

As a curiosity, a way to simulate this in vanilla JavaScript would be with an object-based scope via with that mutates after the mand pletes. For example, if every snippet you typed into the console were wrapped with:

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

In this case, $ is supplied by accessing the chromeConsoleAPI object on the scope chain. Normal code can access $, but since the setTimeout function runs after chromeConsoleAPI.$ is deleted, it does not find anything named $. Note that this still doesn't pletely replicate the behavior, because this blocks access to any user-defined $. In actuality, the mand line API must inject its functions at the very top (i.e., most remote) part of the scope chain.

The problem because Jquery library Load after your custome code loaded.

Are you using external js file for your custome script? Then you load your script under the jquery script.

You must add jquery library link first then add your script.