为什么我的变量在Javascript / Jquery中不全局可用？

Question

I'm trying to declare a global variable called GlobalVarTest , which is defined in a function within my function LikeTermsCombiner2() . In the code below, .ReplaceThis gets replaced successfully, as it appears within the same function in which the variable is defined, but .ReplaceThis2 does not get replaced outside of the function.

I noted in the code where I've also tried to declare GlobalVarTest .

My actual code is rather long, but I whittled it down to the bare bones so that it's clear where all of the functions are. (In other words, some functions appear not to do anything in this code, but they serve a purpose in the actual code.)

var GlobalVarTest;

function LikeTermsCombiner2() {


   //var GlobalVarTest; Tried putting this here

  $(function() { 

   //var GlobalVarTest; Also tried putting this here

    $(function() { 

        GlobalVarTest = "5";  
        $(".ReplaceThis").html(GlobalVarTest);      

    });  

   $(".ReplaceThis2").html(GlobalVarTest);      


    });

}


$('.Expression').each(function() {

  console.log(LikeTermsCombiner2());

 });

http://jsfiddle.net/2x7049bs/162/

Answer 1

Solution

You can move your embdedded function into a separate function and return a variable, assigning this to something within the first function. This does not need to be used, but will ensure the first function waits for the second to complete before continuing. As demonstrated below, this means that the global value is no longer undefined.

Please see the demo below for a working example.

---

Explaination

$(function() { ... }

The code above is short hand for making a function run on window load, the issue you is that although you are assigning them in various locations, that does not mean the will be completed in that order.

Moving the $(".ReplaceThis2").html(GlobalVarTest); to after the closing tag of function LikeTermsCombiner2() { ... } will still not necessarily work. That function effectively adds a function to the run list after page load, but does not wait for it to be run (this function then adds a second to the run list, but again does not wait for it to be completed).

Adding a function to the run list is a much quicker action than actually processing that entire element of code so the 'parent' function races ahead without variables being defined.

---

Demo

 var GlobalVarTest; function LikeTermsCombiner2() { //var GlobalVarTest; $(function() { // Move current code into a separate function. // Call the separate function and assign to variable to ensure function waits for result waitForComplete = setGlobalFn(); $(".ReplaceThis2").html(GlobalVarTest); }); return "LikeTermsCombiner2 return value"; } // Bring the code that sets GlobalVarTest into a different function function setGlobalFn() { // Your code... // Set GlobalVarTest GlobalVarTest = "5"; // Replace as needed $(".ReplaceThis").html(GlobalVarTest); // Return a value (does not need to be used) return true; } $('.Expression').each(function() { console.log(LikeTermsCombiner2()); }); 

 .root { border-top: thin black solid; } .root>sup { vertical-align: baseline; position: relative; top: -0.4em; font-size: 70%; } .Index { vertical-align: baseline; position: relative; top: -0.4em; font-size: 70%; } .index { vertical-align: baseline; position: relative; top: -0.4em; font-size: 70%; } span[class*='variable'] <span class="Parentheses FirstSet">(<span class="TermWrapper"><span class="Coefficient">1</span></span>) </span><span class="Parentheses SecondSet">( 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="Expression"></span> <br> This should say five: <span class="ReplaceThis"></span> <br> This should also say five: <span class="ReplaceThis2"></span>