Soru Jquery append () eşzamansız davranıyor mu?


Bir dizi yazı gördüm (sözde hemen eklemek) bununla çelişen kabul edilmiş cevaplar. JQuery kullanıyoruz 1.4 (http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js) ve append () asenkron gibi görünüyor, öyle ki:

AJAX geri arama bağlamında kodu gösterecek şekilde düzenlendi

 ...
 var message = $.ajax({
   type: "GET",
   url: "/getVolumes/" +  _Id,
   async: false 
 }).responseText;
 if (parseInt(message) != 0){
   var $results = $(message);
   $MAIN_DIV.append($results);
   retrieveTargets();
 }
...    
function retrieveTargets(){
  var $targets = $(".resultTargets");
}

Sayfayı beklendiği gibi yürütür ve oluşturur, ancak hedef sorguları çalışma zamanında hiçbir şey vermez. JS konsolunda aynı kodu çalıştırmak öğeleri beklendiği gibi alır.

Bu JQuery'de beklenen davranışsa, ekleme bitene kadar beklemenin doğru yolu nedir?


17
2018-02-22 23:18


Menşei


jQuery 1.8 ?? nasıl olur?? Gelecekten misin? :) - DrStrangeLove
Ekle senkronize ancak Ajax çağrınız değil. Bu kod nerede bulunur? Ajax çağrınızın geri çağırma fonksiyonunda? - Capsule
Doğru sürümle düzenlenmiş. Bahse girerim 1.8'de istediğim gibi çalışır. - RSG
.resultTargets nedir? ajax cevabınızdaki bir element mi? Bu şekilde de erişebilirsiniz: var hedefler = $ results.find ('. ResultTargets'); - Andy
Eğer yerleştirirsen ne olur console.log( $MAIN_DIV.length ) hemen önce $MAIN_DIV.append(...? - user113716


Cevaplar:


Tüm yorumlar bunu takip etmede yardımcı oldu. Konsolda kırmızı bir ringa balığı izliyordum. Sorun eşzamanlılık ile değildi, sonraki satırlarla oldu:

$targets.each( function(){
  ...
  this.html();
  ...

Olması gerekiyordu

$(this).html();

Kısacası, herkes haklıydı. Jquery append () senkronize şekilde davranır.


24
2018-02-23 00:00





Bir şey sonra işe yaramazsa, bunu deneyin. append.

$('#dynamic-container').append(<your-content>) ;
setTimeout(function() {
    ...code which addresses elements inside #dynamic-container...
},0) ;

Daha fazla detay:

  • Görünüşe göre append senkronize
  • Görünüşe göre, DOM özellikle Google Chrome’da senkronize edilmiyor. Bu sorunun yüksekliğini almaya çalışırken karşılaşıyorum. div sonra append
  • Benim varsayımım, uyumsuz olarak güncellenen tarayıcı güncelleme iş parçacıkları olduğu, aşağıdaki konularla ilgili daha fazla yorum yapıldığı, yine de işlerin nasıl yürüdüğü konusunda net olmadığıydı, ancak çözüm benim için her durumda işe yarayacaktı.

9
2018-01-23 07:02



Bu yanlış. Tarayıcı, JavaScript istek verileri veya DOM'ın ölçümleri olduğunda, kullanıcıya görünmese bile, düzenini güncelleyecektir. (Bunun nedeni düzen atma.) - Alan H.
Tamam, render iş parçacığı bölümü, tarayıcının UI güncellemelerini nasıl ele aldığına dair varsayımdır. Bu sorunu kodumda karşı karşıya bıraktım ve yukarıdaki çözümü kullanarak çözdüm. Hatta, işlev dizisinin aynı iş parçacığı içinde tamamlanmasından sonra düzen kodunun çalıştırılması bile olabilir. Tarayıcının nasıl çalıştığı konusunda uzman değilim - Bitonator
Bunu söylemekten nefret ediyorum ama sanırım yanılıyorsunuz. Yukarıdaki sorunun basit bir şekilde yeniden üretilmesini (bazı jsfiddle) üretebildiğinizden şüpheliyim; .append gerçekten tamamen senkron. Ayrıca, JavaScript'in tek bir iş parçacığı olduğunu ve hiçbir şeyin (tarayıcı dahil) aynı anda veriyi dönüştürmediğini lütfen unutmayın. - Alan H.
Tamam, bu bana mantıklı gelmiyor: Kodumu kontrol ettim ve DOM ağacına bir agility.js nesnesini ekliyorum. Çeviklik, daha sonra jQuery'nin nesnesini, nesnenin görünümünün DOM ağacına eklenmesi için çağıran bir olayı tetikler. Beni şaşırtmak, javascript tek iş parçacıklıysa, olay tetiklemesi, agility.js işleyicisinin derhal çağrıldığını göstermesiyle sonuçlanır. Thats neden setTimeout kullanarak bitti. BTW, agility.js'de setTimeout çağrıları göremiyorum - Bitonator
Ah! bu yüzden olay ve iş parçacığı geciktiren iş parçacığı değil. Alan için teşekkürler. - Bitonator