JQuery показать/скрыть не ждать завершения

Question

Я пытаюсь периодически:

1. выборки данных из вызова Ajax
2. сравнить данные с содержанием DIV
3. , если данные = содержание 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() дождаться ее завершения (400 мс в этом примере) перед вызовом функции replace()?

Я также пробовал с задержкой() и 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 вызова)