Question

我有最奇怪的Bug，我的Javascript函数的行为有所不同，具体取决于是否在特定的行上设置了警报。

基本上代码如下：

var friendsHtml = 'Error String';
$.get("url", function(xml){
    $(xml).find('friend').each(function(){
        friendsHtml = 'html stuff';
    });
});
var div = '<div>'+friendsHtml+'</div>';
$("#friends_window").html(div);

始终显示错误字符串而不是HTML字符串。但是当我在这一行添加空警报时，一切正常：

var friendsHtml = 'Error String';
$.get("url", function(xml){
    $(xml).find('friend').each(function(){
        friendsHtml = 'html stuff';
    });
});
alert("");
var div = '<div>'+friendsHtml+'</div>';
$("#friends_window").html(div);

我真的不明白。

Answer 1

alert阻止（“暂停”）函数的执行，但不是AJAX请求。

因此，当您点击“确定”关闭警报对话框时，请求可能已完成，然后friendsHtml中的回调方法会更改jQuery.get变量。

可视化：

// Case 1
var friendsHtml = 'Error String';
< sending AJAX request... >
var div = '<div>'+friendsHtml+'</div>';  // <AJAX request hasn't finished yet
                                         // so "Error String" is printed.
// Case 2:
...
< sending AJAX request >
alert("");                           // <-- Blocks execution
                                     // Meanwhile, AJAX request finishes
                                     // and changes friendsHtml to "html stuff"
< User dismisses dialog, and the execution is resumed >
var div = '<div>'+friendsHtml+'</div>'; // <-- "html stuff"

Answer 2

我认为正在发生的事情是在允许$.get()完成之前更新div。您可以将div更新代码放在$.get()的回调函数中。您可能需要在回调内部进行一些进一步的错误检查，以确保您的$(xml).find()返回您期望的内容。

空警报更改功能行为

2 个答案: