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

Question

我正在尝试声明一个名为GlobalVarTest的全局变量，该变量在我的函数LikeTermsCombiner2()中的一个函数中定义。在下面的代码中，.ReplaceThis被成功替换，因为它出现在定义变量的同一函数中，但.ReplaceThis2并未在函数外部被替换。

我在代码中指出，我也曾尝试声明GlobalVarTest。

我的实际代码很长，但是我将其精简了一下，以使所有功能都清晰可见。 （换句话说，某些函数在此代码中似乎没有执行任何操作，但在实际代码中它们是有目的的。）

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

解决方案

您可以将嵌入的函数移到一个单独的函数中并返回一个变量，将该变量分配给第一个函数中的某个对象。不需要使用此功能，但可以确保第一个功能在第二个功能完成之前先等待。如下所示，这意味着全局值不再是未定义的。

请参见下面的演示以获取工作示例。

---

说明

$(function() { ... }

上面的代码是使函数在窗口加载时运行的简捷方式，问题是，尽管您在各个位置分配了它们，但这并不意味着将按该顺序完成。

将$(".ReplaceThis2").html(GlobalVarTest);移到function LikeTermsCombiner2() { ... }的结束标记之后仍然不一定有效。该功能在页面加载后有效地将功能添加到运行列表中，但不等待其运行（此功能随后在运行列表中添加了第二个功能，但再次不等待其完成）。

向运行列表中添加功能比实际处理整个代码元素要快得多，因此“父级”功能会在不定义变量的情况下快速前进。

---

演示

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>