Question

我需要循环通过div并使用promise模式加载它们，但显然只显示上次调用的数据。

这是我的代码

$('div[class=ceTable]').each(function () {
    var position = $(this).position();
    gridID = $(this).attr('id')
    tableID = $(this).attr("data-tableid")
    docId = $(this).attr("data-docid")
    headerFound = $(this).data("headerFound")
    headerArray = $(this).data("headerArray")
    columnCount = $(this).data("columnCount")

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "ajaxGetTableData",
        data: {
            'docID': docId,
            'tableID': tableID
        },

        beforeSend: function () {
            $('#' + gridID).block({
                css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#36a9e1',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                    opacity: 5,
                    color: '#fff'
                },
                message: 'Loading Grid'
            });
        }

    }).done(function (data) {
        console.log(data, "ajaxGetTableData")
        ceFeature.generateGridFromJSONObject({
            tabledata: data,
            columnCount: columnCount,
            gridID: gridID,
            headerArray: headerArray,
            headerFound: headerFound
        })
        $('#' + gridID).unblock();
    })

Answer 1

您的变量是隐式全局的（因为您忘记了var keyword），因此每次迭代都会覆盖以前的值。异步回调只会访问最后一个 - 典型的creating functions in a loop problem。

要解决此问题，请将变量设置为本地变量（each回调），以使成功回调成为其范围内各自变量的闭包：

$('div[class=ceTable]').each(function () {
    var position = $(this).position(),
        gridID = $(this).attr('id'),
        tableID = $(this).attr("data-tableid"),
        docId = $(this).attr("data-docid"),
        headerFound = $(this).data("headerFound"),
        headerArray = $(this).data("headerArray"),
        columnCount = $(this).data("columnCount");
    …

Answer 2

使用闭包：

$('div[class=ceTable]').each(function () {
    var position = $(this).position();    
    gridID = $(this).attr('id')
    tableID = $(this).attr("data-tableid")
    docId = $(this).attr("data-docid")
    headerFound = $(this).data("headerFound")
    headerArray = $(this).data("headerArray")
    columnCount = $(this).data("columnCount")
    (function (columnCount, gridID, headerArray, headerFound) {    
        $.ajax().done();
    }(columnCount, gridID, headerArray, headerFound));
});

在循环中使用promise模式

2 个答案: