jQueryの機能が

Question

私はこの2つの機能

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を呼び出すたびに、populateDataの先頭でhapusKelasが実行されます。

最初に達成したいことは、populateDataがページ上に表を追加し終わった後にhapusKelas関数が呼び出されることです。どうか、これを解決するために私を幾分与えてください。

戻ってあなたのサービスコールが返す成功コール一度

Answer 1

で代わりの$に.get（）を使用しての$アヤックス（）を使用します。行が表示された後で最終関数を実行する場合は、そのタイムアウトコールバックの中で呼び出す必要があります。

目的は行を1つずつ表示するようですが、現在のタイムアウトはすべて同時に発生します。これらのタイムアウトを非同期ループ構造に入れることでこれを解決できます。

また、配列内に生成するすべてのHTMLを最初に収集し、1行に1個ずつ配置し、その配列に対して非同期ループを実行します。次のように

あなたはこれを行うことができます。

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

このエラーの理由は、（$のに.getによるものでした） 非同期である場合、次のコード行はajax要求を完了する前に実行されます。

これを解決する方法は2つあります。

1）最終コールバック機能の中でhapusKelas('.dimmer.md', 'active');と呼んでください。

2）あなたは、非同期コールバックを持っている、とさえそのコールバックであなたが時間を持っているasync:falseオプション