Question

我已经得到了下面的代码，我已经在另一个函数中设置了变量ShowLoading。这可能是原因吗？当你启动一个新函数时，javascript中的IE变量没有被传递？我也试过没有打开一个新功能并添加到现有但没有Joy。

DIV＃Loading基于javascript。

$(document).ready(function() {
if(ShowLoading == true){
    $("#Loading").show();
}else{
    $("#Loading").hide();
}
});

ShowLoading在此处设置：

if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        var ShowLoading = "No";
        $('div#Results-Data').html(data);
    });
}

Answer 1

如果使用typeof()，您可以检查ObjNumber是否未定义，如果您期望一个数字，请不要将其测试为' '。如果您检查someObject != ' '使用typeof(someObject) === undefined，那么您的测试将无效，如果未定义则您将返回true，然后您可以显示div并将其隐藏为false。您还可以进行测试以查看对象是数字，函数还是任何javascript类型。您的代码唯一的问题是if语句，您的显示或隐藏代码都不对。将所有内容保存在$(document).ready()中是最佳实践，因此您可以在操作DOM之前知道DOM已完全加载。请记住DOM与您的对象ObjNumber无关，并且基于您的问题ObjNumber在DOM_ready之后加载并由POST加载。

不要测试＆＃34;否＆＃34;的字符串。和＆＃34;是＆＃34;，你应该使用布尔[true | false]进行简单的yes | no测试。字符串不应用于此类测试。＆＃34;是＆＃34;和＆＃34;不＆＃34;对计算机毫无意义。

我还想指出你没有范围问题（假设值ShowLoading在测试之前的某个时刻被初始化）。每次调用$（）并传入搜索条件。您正在设置DOM元素搜索的范围。它将从DOM树的根开始，并遍历到找到符合该条件的元素的位置。因此，当您调用$("#Loading")时，它将返回具有id＆＃34; Loading＆＃34;的DOM元素。这将每次返回正确的DOM元素。您当前的示例没有任何范围问题。 return元素将位于调用它的函数范围内的本地对象中。

在使用DOM执行任何操作之前，您希望检查DOM是否已完全加载的原因是为了避免错误，例如＆＃34;未定义的值没有属性＆＃34;。如果在加载DOM元素之前尝试访问它，则会因访问未定义的对象而出现此错误。所有javascript操作都应该等到DOM完全加载。您的代码的所有起点必须包含在DOM就绪检查中。

$(document).ready(function() {
  if (typeof(ObjNumber) === undefined){
    $("#Loading").show();//ObjNumber is undefined show loading screen and start loading stuff.
    //post your data and do what ever you need to do for loading here
  }else{
    $("#Loading").hide();//ObjNumber is defined. hide loading screen. everything is loaded.
  }
});

您不需要像每个人都告诉您的那样将ObjNumber设置为全局范围。如果你想将ObjNumber传递给另一个函数进行加载，那么就这样做吧。

$(document).ready(function() {
  if (typeof(ObjNumber) === undefined){
    $("#Loading").show();//ObjNumber is undefined show loading screen and start loading stuff.
    loadStuff(ObjNumber);
  }else{
    $("#Loading").hide();//ObjNumber is defined. hide loading screen. everything is loaded.
  }
});


function loadStuff(obj){
  //load some stuff using obj
}

这将消除您使用一堆可以将代码转换为鼠窝的值加载全局范围时遇到的任何问题。

为了使这个例子更小，您可以假设在DOM_ready之前未定义对象ObjNumber，因为您从POST获得ObjNumber并且您之前不能POST DOM加载。因此，您可以在DOM_ready上显示加载屏幕，并在加载完成后隐藏它。我已将此下一个示例从POST更改为GET，因为您没有发布您真正获得日期的数据。

/* have the loading screen set to display by default
* only hide it once the object is loaded.
* this way you don't have to keep checking if its 
* loaded just simply load it then hide the loading display.
*/
$(document).ready(function() {
  var ObjNumber;
  $.get("my url path to get value", function(data){
    ObjNumber=data;
    $("#Loading").hide();
  });
});

我还想评论一下，当您获得的值不是GET时，您应该使用POST。 POST用于设置未获取值的值。

Answer 2

ShowLoading应该是全球性的。
ShowLoading应采用布尔值true或false，而不是No以及与No不同的其他内容。

希望它有用！

Answer 3

您应该将ShowLoading移至全局范围。

在函数外部初始化全局var;

var ShowLoading = false; // or true

修改你的功能

if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        ShowLoading = false; // remove var to use global variable.
        $('div#Results-Data').html(data);
    });
}

你应该没事。

另一种方法是创建一个切换加载元素的函数。

function Loader(what) {
   if(what == "show") {
      $("#Loading").show();
   } else if(what == "hide") {
      $("#Loading").hide();
    }
}

只要您想展示自己的装载机，就可以拨打Loader('show');或Loader('hide');来隐藏它;

if ($.trim(ObjNumber) != ''){
    Loader('show');
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        Loader('hide');
        $('div#Results-Data').html(data);
    });
}

Answer 4

您在看似不同的范围内声明ShowLoading变量，因此，您无法从其他函数访问它

这是你的代码：


$(document).ready(function() {
  if(ShowLoading == true){
    $("#Loading").show();
  }else{
    $("#Loading").hide();
  }
});
...
if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        var ShowLoading = "No"; // this variable is only accessible 
                                // from this scope
        $('div#Results-Data').html(data);
    });
}

要解决范围问题，我建议（作为最简单的替代方法）在公共父范围内声明变量，类似：


var ShowLoading; // declare the variable here
$(document).ready(function() {
  if(ShowLoading == true){
    $("#Loading").show();
  }else{
    $("#Loading").hide();
  }
});
...
if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        ShowLoading = false; // you assign the variable as normal
                            // this variable can be accessed 
                            // from parent and sibling scopes too
        $('div#Results-Data').html(data);
    });
}

注意：虽然javascript上没有变量类型，但最好尽可能保持对boolean的使用true / false变量的一致性，这会使代码更具可读性

警告：这解决了范围问题，但仍然是另一个问题：竞争条件，如果你的$（文件）.ready事件处理程序在回调帖子之前被调用，你的＆＃34 ;显示加载＆＃34;永远不会被隐藏。

为解决这个问题，我建议以这种方式隐藏帖子回调中的#Loading元素：


/*var ShowLoading; No need for ShowLoading and it doesnt really help*/
$(document).ready(function() {
  $("#Loading").show();
});
...
if ($.trim(ObjNumber) != ''){
    $.post('#URL#', {ObjNumber: ObjNumber}, function(data) {
        // instead of setting ShowLoading = "No", we can hide the element
        // from here 
        $(document).ready(function() {
          // wait for document ready before hiding #Loading element
          // to avoid accessing uninitialized DOM
          $("#Loading").hide();
        });
        $('div#Results-Data').html(data);
    });
}

注意：如果你试图检查ObjNumber是否是一个数字，最好使用类似的东西：


if (!isNaN(ObjNumber)){
...
}

用Javascript隐藏DIV？

4 个答案: