另一个函数内部jQuery函数首先执行

问题描述：

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函数。请，给我解决这个问题。

'$ .get'是异步的功能，移动'hapusKelas;'成功回调 – Satpal

里面是什么（'主动 'dimmer.md。'）超时的目的？请注意，它在一个实例中写入所有表。也许你想在每行显示之间延迟2秒？并且：它不会输出数据的第一行。 – trincot

@trincot是啊我想延迟显示每一行之间，什么是最好的办法呢？ – imilah

答

你有一个异步回调，甚至在回调你有时间出来。如果你只想在行显示后运行你的最终函数，你需要在超时回调中调用它。

您的目的似乎是逐行显示行，但您目前的超时时间将全部在同一时间触发。您可以通过将这些超时放入异步循环结构来解决此问题。

我也会首先收集所有想要在数组中生成的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 
    }); 
};

waaaaaa非常感谢@trincot ...我从来没有想过首先收集所有的HTML。 – imilah

答

呼叫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); 
        }) 

       }) 

       }) 

      }

也许为OP解释你改变了什么，为什么让他们明白他们出错的地方。 – Brad

我同意@brad ..一旦你的服务调用返回成功回调，调用hapusKelas函数。 – Sharmila

答

原因这个错误是由于$获得（）是异步，下一行代码将在完成ajax请求之前执行。

我可以建议两种方法来解决这个问题。

1）拨打hapusKelas('.dimmer.md', 'active');里面的成功回调函数最后一行。

2）使用$阿贾克斯（）而不是使用$获得（）与async:false选项

另一个函数内部jQuery函数首先执行

相关推荐