if/else 完成时的 jQuery答案

【问题标题】：jQuery when if/else are doneif/else 完成时的 jQuery
【发布时间】：2013-12-27 16:43:42
【问题描述】：

如果在使用 jQuery 时遇到问题，我不知道如何解决。简单地说，我得到了以下内容：

var overlay;

if(condition == "test") {
    overlay = $("<div></div>");
}
else if (condition == "test2") {
    console.log("first-log");
    overlay = $("<span></span>");
}

console.log("second-log");
overlay.prependTo("body");

如果条件与“if”匹配，一切正常，叠加层充满内容并将添加到正文中。

当条件匹配“else if”时，我收到一个错误，即覆盖未定义。

所以我放了一些 console.log() 来查看我的代码在做什么。两个 console.log 操作都被触发，但在我的浏览器控制台中，我首先看到的是“第二条日志”，然后是“第一条日志”。

我的代码尝试在“if / else if”完成之前添加前缀，即使条件匹配。

我试图寻找答案，但我根本找不到任何东西，所以我希望这里有人可以帮助我。谢谢！

jsfiddle of my code

【问题讨论】：

我猜代码应该是 overlay = $("");
注意到并改变了这一点。但这只是一个虚拟代码，写得很快。我自己的代码比较复杂，所以这只是一个例子。
代码是否以某种方式被多次调用？是在事件处理程序、setTimeout 还是其他东西中？
当您添加else 语句时会发生什么变化？ else { console.log(condition);}
您提供的代码很好，一定是未发布的代码中导致问题的原因。

标签： jquery if-statement arrangeoverride

【解决方案1】：

您应该在程序开始时初始化 var 覆盖层。

【讨论】：

谁给了-1：为什么？鉴于发布的代码，这是一个很好的修复。 var overlay = $('<span>'); 修复了丢失的else 案例的问题。
我试过这个。叠加层不再像预期的那样未定义。但是我在 de 'else-if' 中添加到叠加层的内容并没有添加。
@Boldewyn - 这可能是因为答案不清楚它被初始化为什么。正如问题中的代码所示，它也不会改变 condition=="test2" 时的任何行为

【解决方案2】：

您的代码似乎没有任何问题，我刚刚测试了它并且它正在工作！

您的代码经过测试 - http://jsfiddle.net/9Pb7u/

如果所有其他方法都失败了，一个简单的修复方法是将prependTo 放在 if 语句中 - 还要确保向 div 和 span 添加一些文本或样式，否则它们可能在您查看来源。

if(condition == "test") {
    $("<div>TEST</div>").prependTo("body");
} else if (condition == "test2") {
    $("<span>TEST 2</span>").prependTo("body");
}

工作http://jsfiddle.net/9f93d/

【讨论】：

我想我的代码使用起来有点复杂。检查我的 JSFiddle 以了解我的意思。
我猜是这样，但这是你给出的例子。我从你的 JSFiddle 得到的只是语法错误——也许先修复这些并包含相关的库。

【解决方案3】：

我主要通过回调或承诺来解决这类问题。使用回调你可以试试这个：

var overlay = $("");

testCondition = function(callback) {

  if(condition == "test") {
    overlay = $("<div></div>");
  }
  else if (condition == "test2") {
    console.log("first-log");
    overlay = $("<span></span>");
  }

  callback(overlay);

}

并像这样调用这个函数：

testCondition(function(callback){
   overlay.prependTo("body");
});

这是fiddle

您可以在控制台中检查，正确的元素会被预先添加;)

【讨论】：

不知道，这首先可能有什么帮助。只需将噪音添加到完美的if/else。（别误会，我自己也喜欢承诺。）
是的，我知道，这是一种肮脏的解决方法，但鉴于他提供的这么多信息，这是我能给出的唯一可行的答案。 @ronnyrr：如果您可以添加更多代码，我们可能会找到更好的解决方案；）
@user3085570 的回答怎么样？无需开销即可完美运行。当condition == 'test3'. 时，你的也会失败
那是真的......我会解决这个问题，但是当他遇到“未定义”异步问题时，将答案作为附加提示。
感谢答案和 cmets！我在我的帖子中添加了一个 JSFiddle，它非常大，但如果你们能通过它，那就太棒了。在 prependTo 未定义后，我的所有带有“test”的 console.log() 都会被记录。

【解决方案4】：

问题的关键在于您使用 jsfiddle 代码进行的更新。根据您的 jsfiddle 链接，它似乎具有以下基本结构：

if (resource=="iframe") {
  console.log("resource is iframe");

} else if (resource=="json") {
    $.getJSON("someUrl", function(data) {
        console.log("resource is json");
    });
}

console.log("at the end - one of the above log statements should be hit");

但是，我认为您试图简化的问题是您处理 resource=="json" 的案例没有受到打击。

这可能是因为 getJSON 调用是异步执行的 - if 块中的函数没有内联执行，当您期望它时，但稍后，当 getJSON 调用有结果时，以及之后外部函数的其余部分已经执行完毕

解决此问题的一种方法是使用回调（类似于Igle's answer）更改结构，以确保您的处理代码直到之后才会执行：

function executeAfterIf() {
    console.log("at the end - one of the above log statements should be hit");
}

if (resource=="iframe") {
  console.log("resource is iframe");
  executeAfterIf();

} else if (resource=="json") {
    $.getJSON("someUrl", function(data) {
        console.log("resource is json");
        executeAfterIf();
    });
}

在这个基本重构中，executeAfterIf 是在处理 if 块的任一情况后调用的回调函数。

当然，还有其他模式可以处理这类事情；您选择哪一个取决于项目其余部分中的代码。

【讨论】：