Po zakończeniu pracy funkcji

Question

Używam wtyczki jQuery, pobiera dane z adresu URL, pobiera, oblicza i zapisuje niektóre dane w numerze div.

Chcę skopiować tę zawartość div do innej div, gdy funkcje te działają.

na przykład:

$("#div1").myfunction(); // it gets and calculates data and adds to #div1 . it needs 2-3 seconds to be done 
var contents = $("#div1").html(); // when myfunction() done, copy contents 
$("#div2").html(contents); 

kiedy zabrakło tego kodu, nie ma nowych treści w #div2.

Answer 1

trzeba mieć myfunction wziąć parametr wywołania zwrotnego, która to wykonuje, gdy żądanie jest wykonywane

function myfunction(cb) 
    $.ajax({ 
     type: "get", 
     url: "page.html", 
     success: function(data){ 
      $("#div1").html(data); 
      if(typeof cb === 'function') cb(); 
     } 
    }); 
} 

myfunction(function(){ 
    $("#div2").html($("#div1").html()); 
}); 

Answer 2

Będziesz wystarczy umieścić ten wiersz:

$("#div2").html($("#div1").html()); 

do zwrotnego sukcesu kodu ajax realizowanego w myFunction, aby upewnić się, że operacja się dzieje, gdy klient otrzymał odpowiedź i włożeniu go do DOM.

Answer 3

Jeśli jesteś jednym piśmie wtyczki, należy albo ciężko kod go do funkcji wywołania zwrotnego AJAX lub zezwolić na przekazanie funkcji zwrotnej z opcjami.

Jeśli nie masz kontroli nad plugin, musisz stale zapytanie do div aby sprawdzić, czy został on zaktualizowany:

var oldHTML = $("#div1").html(), 
    counter = 0; 

$("#div1").myfunction(); 

copyHTML(); 

function copyHTML() 
{ 
    var newHTML = $("#div1").html(); 

    // we don't want this function to run indefinitely 
    if (++counter > 15) return; 

    if (newHTML == oldHTML) 
     setTimeout(copyHTML, 1000); 
    else 
     $("#div2").html(newHTML); 
} 

Answer 4

Ajax wywołania zwrotne (takie jak success) zostanie wycofany w jQuery 1.8 . Zamiast tego można użyć obiektu jQuery's deferred, aby uruchomić (lub cofnąć) działanie, które wymaga jeszcze jednego warunku, zanim zostanie wykonane.

var successFunction = function() { 
    var contents = $("#div1").html(); 
    var newElement = $("<div id=div2></div>").html(contents); 
    $("body").append(newElement); 
} 

var failedFunction = function() { 
    // reset element or undo last change 
    window.alert("Update Failed"); 
} 


$.when(
    $.ajax(countParams), 
    doCalculate() 
).then(
    successFunction(), 
    failedFunction() 
); 

Creating Responsive Applications Using jQuery Deferred and Promises