多输入框keyup事件带超时的Ajax调用问题排查与修复

问题场景与现有代码 #

页面包含多组输入字段，需求是用户停止输入1.2秒后自动将表单数据保存到数据库，现有实现代码如下：

var debounce = null;
$overviewContainer.on('keyup change', 'input, textarea, select', function(){
    //<------------------Update Section Item ---------------->
    clearTimeout(debounce);
    console.log('aca se actualizando!');
    var savingMessage = '<div class="alert-container" style="width: 7%;"><div class="spinner spinner-alert" style="height: 60px; width: 60px;"></div>';
    $('#alerts').append(savingMessage);
    var $savingMessage = $(savingMessage).find('.spinner-alert');
    if($(this).attr('type') != 'file'){
        var $form = $(this).parents('form').first(),
            $url = $form.attr('action');
        debounce = setTimeout(function(){
            $.ajax({
                url: $url,
                type: 'POST',
                data: $form.serialize(),
                maxConcurrency: 3,
                success: function success(response) {
                    console.log($savingMessage);
                    $savingMessage.hide();
                    $('#alerts').innerAlert('success', response.message);
                },
                error: function error(response) {
                    $('#alerts').innerAlert('error', response.message);
                }
            });
        }, 1200);
    }
});

遇到的两个核心问题 #

• 1. 用户在Ajax请求完成前离开页面，输入值无法保存；
• 2. 用户修改一个字段后，在1.2秒超时触发前切换修改另一个字段，仅第二个字段的修改会被保存，第一个字段的修改被忽略。

问题1：页面卸载时未完成保存的处理 #

原因：页面卸载（关闭/跳转）时，未完成的Ajax请求会被浏览器中断，导致数据丢失。onbeforeunload提示用户的方式体验较差，且部分浏览器会限制自定义提示内容。

解决方法：

1. 用navigator.sendBeacon替代普通Ajax处理页面卸载时的保存，它是浏览器专门为页面卸载时发送数据设计的API，可靠性更高；
2. 维护一个标记，记录当前是否有待提交的表单数据或正在进行的请求，在页面卸载前判断并处理。

代码修改要点：

// 新增全局标记：是否有未完成的保存任务
let hasPendingSave = false;

// 原事件处理中，设置计时器时标记为true
const newDebounce = setTimeout(function(){
    hasPendingSave = true;
    $.ajax({
        url: $url,
        type: 'POST',
        data: $form.serialize(),
        maxConcurrency: 3,
        success: function(response) {
            $savingMessage.hide();
            $('#alerts').innerAlert('success', response.message);
        },
        error: function(response) {
            $('#alerts').innerAlert('error', response.message);
        },
        complete: function(){
            hasPendingSave = false; // 请求完成后重置标记
        }
    });
}, 1200);

// 页面卸载监听
window.addEventListener('beforeunload', function(e) {
    if (hasPendingSave) {
        // 用sendBeacon提交当前待保存的表单数据
        const $pendingForm = $('form').filter(function(){
            return $(this).data('debounce') !== undefined;
        }).first();
        if ($pendingForm.length) {
            navigator.sendBeacon($pendingForm.attr('action'), $pendingForm.serialize());
        }
        // 浏览器会自动生成标准提示，自定义内容可能不生效
        e.preventDefault();
        e.returnValue = '';
    }
});

问题2：防抖计时器被覆盖的处理 #

原因：全局变量debounce被所有字段共享，每次新的输入事件都会调用clearTimeout(debounce)，清空之前的计时器，导致前一个字段的修改触发的保存被取消。

解决方法：
不给所有字段共用一个防抖计时器，而是给每个表单绑定独立的计时器，通过jQuery的data()方法将计时器ID存储在对应的表单元素上，这样不同表单的防抖任务互不干扰。

修改后的完整代码：

// 移除全局debounce变量
$overviewContainer.on('keyup change', 'input, textarea, select', function(){
    const $target = $(this);
    if($target.attr('type') === 'file') return;

    const $form = $target.parents('form').first();
    const $url = $form.attr('action');

    // 清空当前表单的防抖计时器
    const formDebounce = $form.data('debounce');
    if(formDebounce) clearTimeout(formDebounce);

    // 优化：避免重复添加提示，先清空现有保存提示
    $('#alerts').find('.alert-container').remove();
    const savingMessage = '<div class="alert-container" style="width: 7%;"><div class="spinner spinner-alert" style="height: 60px; width: 60px;"></div></div>';
    $('#alerts').append(savingMessage);
    const $savingMessage = $('#alerts').find('.spinner-alert');

    // 将计时器ID存储到表单的data属性中
    const newDebounce = setTimeout(function(){
        $.ajax({
            url: $url,
            type: 'POST',
            data: $form.serialize(),
            maxConcurrency: 3,
            success: function(response) {
                $savingMessage.hide();
                $('#alerts').innerAlert('success', response.message);
            },
            error: function(response) {
                $('#alerts').innerAlert('error', response.message);
            }
        });
    }, 1200);
    $form.data('debounce', newDebounce);
});

额外优化点：

• 保存提示部分避免重复添加，每次触发时先清空之前的提示；
• 提前判断文件类型并返回，减少不必要的逻辑执行。

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