无法在使用后将JavaScript变量selectedColumnIndex重置为null

问题根源 #

你遇到的问题是因为updateColumnPosition函数的参数名和全局变量selectedColumnIndex同名了。在success回调里执行的selectedColumnIndex = null，修改的是函数内部的局部参数，而非全局的那个变量。所以全局变量的值根本没被重置，下次点击.columnUpdatesInsert按钮时，自然还是之前的旧值。

修复方案1：修改参数名避免冲突 #

把函数参数改成和全局变量不同的名称，比如targetColumnIndex，这样就能明确修改全局变量：

var selectedColumnIndex = null;
$(document).on('click', '.columnUpdates', function () {
    selectedColumnIndex = $(this).attr("data-columnindex");
});

$(document).on('click', '.columnUpdatesInsert', function () {
    if (selectedColumnIndex != null) {
        // 保留原有变量获取逻辑
        updateColumnPosition(tableId, selectedColumnIndex, newColumnIndex);
    }
    else {
        alert("未选中要移动的列。");
    }
});

// 修改参数名，避免和全局变量冲突
function updateColumnPosition(tableId, targetColumnIndex, newColumnIndex) {
    $.ajax({
        type: "POST",
        url: "/Task/UpdateColumnIndex",
        data: { 
            projectId: _projectId, 
            tableId: tableId, 
            selectedColumnIndex: targetColumnIndex, 
            newColumnIndex: newColumnIndex 
        },
        dataType: 'json',
        success: function (data) {
            if (data.success) {
                // 其他无关逻辑保留
                selectedColumnIndex = null; // 现在修改的是全局变量
                var check = 0;
            }
            else {
                // 错误处理逻辑
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " " + thrownError);
        },
    });
}

修复方案2：明确指定全局变量 #

如果不想修改参数名，可以在success回调里用window.selectedColumnIndex明确指向全局变量：

function updateColumnPosition(tableId, selectedColumnIndex, newColumnIndex) {
    $.ajax({
        type: "POST",
        url: "/Task/UpdateColumnIndex",
        data: { projectId: _projectId, tableId: tableId, selectedColumnIndex: selectedColumnIndex, newColumnIndex: newColumnIndex },
        dataType: 'json',
        success: function (data) {
            if (data.success) {
                // 其他无关逻辑保留
                window.selectedColumnIndex = null; // 明确修改全局变量
                var check = 0;
            }
            else {
                // 错误处理逻辑
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status + " " + thrownError);
        },
    });
}

额外优化建议 #

可以在.columnUpdatesInsert的点击事件里，先把全局变量的值暂存到局部变量，然后立刻重置全局变量。这样不管AJAX请求成功与否，都能确保下次操作时变量是null，避免因请求延迟导致的重复操作问题：

$(document).on('click', '.columnUpdatesInsert', function () {
    // 暂存全局变量值，立刻重置
    const tempIndex = selectedColumnIndex;
    selectedColumnIndex = null;
    
    if (tempIndex != null) {
        updateColumnPosition(tableId, tempIndex, newColumnIndex);
    }
    else {
        alert("未选中要移动的列。");
    }
});

内容的提问来源于stack exchange，提问作者amartin