另一個函數內部jQuery函數首先執行

Question

我有這個兩個功能

var hapusKelas = function(namaelement, namaclass) { 
 
    $(namaelement).removeClass(namaclass); 
 
} 
 

 
var populateData = function(link, namamd) { 
 
    $.get(link, function(data) { 
 
    var data = $.parseJSON(data); 
 
    var isitable = ''; 
 
    $('#isihadiahmd').empty(); 
 
    $.each(data, function(i, toko) { 
 
     var count = 0; 
 
     var jmlitem = Object.keys(toko.data).length; 
 
     $.each(toko.data, function(j, barang) { 
 
     setTimeout(function() { 
 

 
      count += 1; 
 
      if (count == 1) { 
 
      isitable = ''; 
 
      isitable = '<tr><td rowspan="' + jmlitem + '">' + namamd + '</td><td rowspan="' + jmlitem + '">' + toko.nama_toko + '</td><td>' + barang.nama + '</td><td>' + barang.qty + '</td></tr>'; 
 

 
      } else { 
 
      isitable = ''; 
 
      isitable = '<tr><td>' + barang.nama + '</td><td>' + barang.qty + '</td></tr>'; 
 
      } 
 
      $('#isihadiahmd').append(isitable); 
 
     }, 2000); 
 
     }) 
 

 
    }) 
 

 
    }) 
 
    hapusKelas('.dimmer.md', 'active'); 
 
}

每個教程說，如果我要運行hapusKelas功能，我得叫populateData函數內部的功能。我已經這樣做了，但每次我調用populateData，hapusKelas都會在populateData的開頭執行。

我想要實現的第一件事是在populateData完成附加表格在頁面上之後呼叫hapusKelas函數。請，給我解決這個問題。

Answer 1

你有一個異步回調，甚至在回調你有時間出來。如果你只想在行顯示後運行你的最終函數，你需要在超時回調中調用它。

您的目的似乎是逐行顯示行，但您目前的超時時間將全部在同一時間觸發。您可以通過將這些超時放入異步循環結構來解決此問題。

我也會首先收集所有想要在數組中生成的HTML，每行一個，然後在該數組上執行異步循環。

你可以做到這一點，如下所示：

var populateData = function(link, namamd) { 
    $.get(link, function(data) { 
     var data = $.parseJSON(data); 
     var isitable = []; // make it an array 
     // Collect html in this array: 
     $.each(data, function(i, toko) { 
      var jmlitem = Object.keys(toko.data).length; 
      var count = 0; 
      $.each(toko.data, function(j, barang) { 
       // Use jQuery methods for creating your content 
       var cells = [$('<td>').text(barang.nama), $('<td>').text(barang.qty)]; 
       if (count == 0) { // Prefix the two columns 
        cells = [$('<td>').attr('rowspan', jmlitem).text(namamd), 
          $('<td>').attr('rowspan', jmlitem).text(toko.nama_toko)] 
          .concat(cells); 
       } 
       isitable.push($('<tr>').append(cells)); 
       count++; 
      }); 
     }); 
     // Display the result in steps: 
     $('#isihadiahmd').empty(); 
     (function loop(i) { 
      if (i >= isitable.length) { 
       hapusKelas('.dimmer.md', 'active'); 
       return; // all done 
      } 
      $('#isihadiahmd').append(isitable[i]); 
      setTimeout(loop.bind(null, i+1), 500); // delay before displaying next row 
     }(0)); // start loop at index 0 
    }); 
}; 

Answer 2

呼叫hapusKelas功能，一旦你的服務調用返回成功回呼...看看那裏我叫那個函數（setTimeout的結束之前）

   var hapusKelas = function(namaelement, namaclass) { 
       $(namaelement).removeClass(namaclass); 
      } 

      var populateData = function(link, namamd) { 
       $.get(link, function(data) { 
       var data = $.parseJSON(data); 
       var isitable = ''; 
       $('#isihadiahmd').empty(); 
       $.each(data, function(i, toko) { 
        var count = 0; 
        var jmlitem = Object.keys(toko.data).length; 
        $.each(toko.data, function(j, barang) { 
        setTimeout(function() { 

         count += 1; 
         if (count == 1) { 
         isitable = ''; 
         isitable = '<tr><td rowspan="' + jmlitem + '">' + namamd + '</td><td rowspan="' + jmlitem + '">' + toko.nama_toko + '</td><td>' + barang.nama + '</td><td>' + barang.qty + '</td></tr>'; 

         } else { 
         isitable = ''; 
         isitable = '<tr><td>' + barang.nama + '</td><td>' + barang.qty + '</td></tr>'; 
         } 
         $('#isihadiahmd').append(isitable); 
         hapusKelas('.dimmer.md', 'active'); ///**called here** 
        }, 2000); 
        }) 

       }) 

       }) 

      } 

Answer 3

原因這個錯誤是由於$獲得（）是異步，下一行代碼將在完成ajax請求之前執行。

我可以建議兩種方法來解決這個問題。

1）撥打hapusKelas('.dimmer.md', 'active');裏面的成功回調函數最後一行。

2）使用$阿賈克斯（）而不是使用$獲得（）與async:false選項