javascript - jquery show/hide 不等待完成

Question

我正在尝试定期：

1. 从 ajax 调用中获取数据
2. 将数据与 div 的内容进行比较
3. if data != div 的内容：隐藏 div，更改数据，显示 div

这是我的代码：

...

<div id="myDiv">old data</div>   
</body>

<script type="text/javascript">

$(document).ready( function() {
    updates();
    done();
});

function done() {
      setTimeout( function() {
      updates(); 
      done();
      }, 5000);
}

function replace(div, content){
    $(div).html(content)
}

function updates() {
    $.ajaxSetup({ cache: false });
    $.getJSON("mywebsite/get_data", function(data) {
        if ( $("#myDiv").html() !== data ){
            $("#myDiv").hide(400, replace("#myDiv", data));
            $("#myDiv").show(400);
        }
    });
}

</script>

...

问题是 div 内容在 div 完全隐藏之前被新数据替换，即使回调函数 replace() 提供给 hide() 函数。

如何让 hide() 函数在调用 replace() 函数之前等待其完成（本例中为 400 毫秒）？

我也尝试过 delay() 和 setTimeout() 但它做同样的事情。

谢谢

Answer 1

我认为您不需要该replace功能。无论如何，这应该工作：

function updates() {
    $.ajaxSetup({ cache: false });
    $.getJSON("mywebsite/get_data", function(data) {
        if ( $("#myDiv").html() !== data ) {
            $("#myDiv").hide(400, function() {
                $("#myDiv").html(data);
                $("#myDiv").show(400);
            })
        }
    });
}

SEE JSFIDDLE（没有 ajax 调用）