全局对象 returns 原始值，即使它已被替换

Question

在初始页面加载时，我创建了一个全局对象。然后用函数设置它的值。

function set_globals(table){
    // Setup Local Storage
    setLocalStorage();

    // DEBUGGING
    debug = AC.debug;
    debug == true ? console.log('Debugging is on.') : console.log('Debugging is off.');

    // URL
    current_url = window.location.protocol + "//" + window.location.host + window.location.pathname;

    // PAGINATION
    page_data   = {
        "_token": $('meta[name="csrf-token"]').attr('content'),
    };
    paginate    = true;
    pagination  = {};
    setPaginationData(table.pagination, table.config.table.id)

    // TABLE
    table_restore   = true;
    // SEARCH
    searched        = false;
    //Downloading
    downloadingData = false;
}

函数。

function setPaginationData(data, table_id){
   pagination[table_id] = data;

   if(pagination[table_id].next_page_url == null){
        paginate = false;
   } 

   debug == true ? console.log('Pagination Data', pagination[table_id]) : false;
}

初始页面加载时的对象数据如下所示。

{
 "total":6159,
 "per_page":100,
 "current_page":2,
 "last_page":62,
 "next_page_url":"localhost/pagination?page=2",
 "prev_page_url":null,
 "from":101,
 "to":200,
 "data":[{REMOVED}]
}

当我运行我的搜索过滤器时。我 return 来自 AJAX 请求的新分页对象，并使用上面的函数设置。

function searchTable(table_config){
    searched = true;

    var search_id     = table_config.table.id+'_search';
    var search_box    = document.getElementById(search_id);
    var search        = search_box.value;
    var table_header  = document.getElementById(table_config.table.id + '_head');
    var table_headers = table_header.firstElementChild.children;


    // Get columns that are searchable
    var search_fields = get_searchable(table_headers);

    var filters = get_column_filters(table_config);

    var post = {
        "_token": $('meta[name="csrf-token"]').attr('content'),
        "search": search,
        "search_fields" : search_fields,
        "filters" : filters,
    };

    debug == true ? console.log('Search:', search, 'Filters:', filters) : false;


    dimTable(table_config.table.id);

    page_data = post;

    var search_url = addSlash(current_url) + table_config.table.urls.search;

    $.post(search_url, post, function(data){
        debug == true ? console.log('Data returned from search:', data) : false;

        clearTableBody(table_config.table.id);
        setPaginationData(data, table_config.table.id);
        populateTable(data.table, table_config);
        getNextPage(table_config);
    });
}

我 return 进入的 "data" 对象在页面加载期间与原始对象的结构完全相同，但它是不同的数据。

{
 "total":186,
 "per_page":100,
 "current_page":1,
 "last_page":2,
 "next_page_url":"localhost/search?page=2",
 "prev_page_url":null,
 "from":1,
 "to":100,
 "data":[{REMOVED}]
}

那么为什么当我运行我的函数获取下一页数据时它使用对象上设置的原始值而不是刚刚从搜索中设置的值？

function getNextPage(table_config){
    debug == true ? console.log('Getting next page of pagination', table_config, pagination[table_config.table.id]) : false;
    checkSort(table_config.table.id); 

    if(pagination[table_config.table.id].current_page < pagination[table_config.table.id].last_page){
        loadingData(table_config.table.id, true);
        var page = pagination[table_config.table.id].current_page + 1;
        var page_url = addSlash(current_url) + table_config.table.urls.pagination + '?page=' + page;

        $.post(page_url, page_data, function(data){
            setPaginationData(data, table_config.table.id);
            // pagination[table_config.table.id] = data;
            loadingData(table_config.table.id, false);
        });
    }
}

function loadingData(table_id, check) {
    if(check == true){
        downloadingData = true;

        $('.'+table_id+'_loading_data').show();
    } else {
        downloadingData = false;
        $('.'+table_id+'_loading_data').hide();
    }
}

我的 searchTable 函数不应该将对象中的数据设置为来自 AJAX 调用的新值吗？

Answer 1

在您的函数 getNextPage() 中，您对服务器进行 post 调用以检索数据。

您已经在函数 searchTable() 中完成了操作，您在其中获得了新的分页数据。

所以回到 getNextPage() 你传递变量 page_data，它是全局的，永远不会改变。

也许在这部分你会找回原来的分页对象并重置它。

全局对象 returns 原始值，即使它已被替换

Global object returns original value even thou its been replaced

javascript

javascript-objects