Masalah sekatan benang UI disebabkan oleh penyegerakan ajax Jquery blocking_jquery

Baru-baru ini bekerja pada projek, saya menghadapi masalah sekatan benang UI yang disebabkan oleh ajax yang disegerakkan Izinkan saya berkongsi proses penyelesaian masalah saya dengan anda.

Alasannya ialah ini, kerana terdapat beberapa tindakan permintaan tak segerak yang serupa pada halaman Untuk meningkatkan kebolehgunaan semula kod, saya merangkumkan fungsi yang dipanggil getData, yang menerima parameter yang berbeza dan hanya bertanggungjawab untuk mendapatkan data. dan kemudian kembalikan data. Logik asas yang dilucutkan adalah seperti berikut:

function getData1(){
    var result;
    $.ajax({
      url : "p.php",
      async : false,
      success: function(data){
        result = data;
      }
    });

  return result;
}　

Ajax di sini tidak boleh tidak segerak, jika tidak, apabila fungsi kembali, hasilnya belum diberikan nilai dan ralat akan berlaku. Jadi saya menambah async:false. Nampak tak ada masalah. Saya boleh mendapatkan data seperti biasa dengan memanggil fungsi ini.

$(".btn1").click(function(){
    var data = getData1();
    alert(data);
});

Seterusnya, saya ingin menambah fungsi lain Memandangkan permintaan ajax memakan masa, saya perlu mempunyai kesan pemuatan pada halaman sebelum menghantar permintaan, iaitu, memaparkan imej gif "memuatkan". juga akan Melihatnya. Jadi fungsi pemprosesan saya menjadi seperti ini:

$(".btn1").click(function(){
    $(".loadingicon").show();
    var data = getData1();
    $(".loadingicon").hide();
    alert(data);
});

Tunjukkan imej pemuatan sebelum meminta dan sembunyikannya selepas permintaan selesai. Nampak tak ada masalah. Untuk melihat kesannya dengan jelas, kod p.php saya tidur selama 3 saat, seperti berikut:

<&#63;php
sleep(3);
echo ("aaaaaa");
&#63;>

Tetapi masalah berlaku apabila saya menjalankannya Apabila saya mengklik butang, imej pemuatan tidak muncul seperti yang diharapkan, dan halaman itu tidak bertindak balas sama sekali. Selepas menyelesaikan masalah untuk masa yang lama, saya mendapati sebabnya, iaitu async:false.

Benang pemaparan (UI) penyemak imbas dan utas js adalah saling eksklusif Apabila melaksanakan operasi yang memakan masa js, pemaparan halaman akan disekat. Tiada masalah apabila kami melaksanakan ajax tak segerak, tetapi apabila ditetapkan kepada permintaan segerak, tindakan lain (kod di sebalik fungsi ajax dan benang rendering) akan berhenti. Walaupun pernyataan operasi DOM saya ialah ayat sebelum permintaan dimulakan, permintaan penyegerakan ini akan "dengan cepat" menyekat urutan UI tanpa memberi masa untuk dilaksanakan. Inilah sebabnya mengapa kod gagal.

setTimeout menyelesaikan masalah penyekatan

Sekarang kita faham apa masalahnya, mari cari penyelesaian. Untuk mengelakkan permintaan ajax segerak daripada menyekat utas, saya fikirkan setTimeout, letakkan kod permintaan dalam sestTimeout, dan biarkan penyemak imbas memulakan semula utas untuk beroperasi. Tidakkah masalah itu dapat diselesaikan? Sejak itu, kod saya menjadi seperti ini:

$(".btn2").click(function(){
    $(".loadingicon").show();
    setTimeout(function(){
      $.ajax({
        url : "p.php",
        async : false,
        success: function(data){
          $(".loadingicon").hide();
          alert(data);
        }
      });
    }, 0);
});　

Parameter kedua setTimeout ditetapkan kepada 0, dan penyemak imbas akan melaksanakannya selepas masa minimum yang ditetapkan. Apa-apa pun, kita jalankan dulu dan lihat.

Gambar pemuatan hasil dipaparkan, tetapi! ! ! Mengapa gambar itu tidak bergerak? Ia jelas merupakan gif animasi. Pada masa ini, saya dengan cepat berfikir bahawa walaupun permintaan penyegerakan telah ditangguhkan, ia masih akan menyekat urutan UI semasa pelaksanaannya. Penyekatan ini sangat hebat sehinggakan imej gif pun tidak bergerak dan kelihatan seperti imej statik.

Kesimpulannya adalah jelas. SetTimeout merawat simptom tetapi bukan punca utama Ia sama dengan membuat permintaan penyegerakan "sedikit" tidak segerak. Kemudian ia masih akan memasuki mimpi ngeri penyegerakan. Rancangan itu gagal.

Sudah tiba masanya untuk menggunakan Tertunda

jQuery memperkenalkan objek Tertunda selepas versi 1.5, yang menyediakan mekanisme tak segerak umum yang sangat mudah. Untuk butiran, sila rujuk artikel ini oleh cikgu Ruan Yifeng http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html.

Jadi saya menulis semula kod menggunakan objek Tertunda, seperti berikut:

function getData3(){
    var defer = $.Deferred();
    $.ajax({
      url : "p.php",
      //async : false,
      success: function(data){
        defer.resolve(data)
      }
    });
    return defer.promise();
}  
$(".btn3").click(function(){
    $(".loadingicon").show();
    $.when(getData3()).done(function(data){
      $(".loadingicon").hide();
      alert(data);
    });
});

Anda dapat melihat bahawa saya mengalih keluar async:false dalam permintaan ajax, yang bermaksud permintaan itu tidak segerak sekali lagi. Sila beri perhatian kepada ayat ini dalam fungsi kejayaan: defer.resolve(data). Parameter ini boleh diperolehi dalam kaedah yang dilakukan, jadi data yang kami minta secara tak segerak boleh dikembalikan dengan cara ini.

Pada ketika ini, masalah telah diselesaikan. Objek tertunda sangat berkuasa dan mudah, kita boleh memanfaatkannya.

Semua kod ujian saya adalah seperti berikut, pelajar yang berminat boleh menggunakannya untuk menguji:

<button class="btn1">async:false</button>
<button class="btn2">setTimeout</button>
<button class="btn3">deferred</button>
<img class="loadingicon" style="position:fixed;left:50%;top:50%;margin-left:-16px;margin-top:-16px;display:none;" src=http://www.update8.com/Web/Jquery/"loading2.gif" alt="正在加载" />
<script>
  function getData1(){
    var result;
    $.ajax({
      url : "p.php",
      async : false,
      success: function(data){
        result = data;
      }
    });
    return result;
  }
  $(".btn1").click(function(){
    $(".loadingicon").show();
    var data = getData1();
    $(".loadingicon").hide();
    alert(data);
  });
  $(".btn2").click(function(){
    $(".loadingicon").show();
    setTimeout(function(){
      $.ajax({
        url : "p.php",
        async : false,
        success: function(data){
          $(".loadingicon").hide();
          alert(data);
        }
      });
    }, 0);
  });
  function getData3(){
    var defer = $.Deferred();
    $.ajax({
      url : "p.php",
      //async : false,
      success: function(data){
        defer.resolve(data)
      }
    });
    return defer.promise();
  }  
  $(".btn3").click(function(){
    $(".loadingicon").show();
    $.when(getData3()).done(function(data){
      $(".loadingicon").hide();
      alert(data);
    });
  });</script>

ps:Perihalan parameter $.ajax

Penerangan Parameter

url diperlukan. Menentukan URL yang permintaan harus dihantar.
data adalah pilihan. Peta atau nilai rentetan. Menentukan data untuk dihantar ke pelayan dengan permintaan.
kejayaan(data, textStatus, jqXHR) Pilihan. Fungsi panggil balik dilaksanakan apabila permintaan berjaya.
dataType
Pilihan. Menentukan jenis data tindak balas pelayan yang dijangkakan.
Pertimbangan pintar dilakukan secara lalai (xml, json, skrip atau html).