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的开头执行。

我想要实现的第一件事是在hapusKelas完成页面附加表后调用populateData函数。请给我一些解决方法。

Answer 1

一旦您的服务呼叫返回成功回叫，请调用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 2

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

你的目的似乎是逐一显示行，但是你现在拥有的超时都会同时发射。您可以通过将这些超时放在异步循环结构中来解决这个问题。

我还会先收集你想在数组中生成的所有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 3

出现此错误的原因是$ .get（）是异步，下一行代码将在完成ajax请求之前执行。

我可以建议两种解决方法。

1）在最后一行成功回调函数内调用hapusKelas('.dimmer.md', 'active');。

2）使用$ .ajax（）而不是使用带有async:false选项的$ .get（）

首先执行另一个函数内的JQuery函数

3 个答案: