基于JqueryUI Autocomplete的条码扫描器回车键延迟需求及问题

问题分析与修复方案 #

你现有代码存在两个核心问题：

1. 把keydown事件绑定在response回调内，会导致每次Autocomplete返回数据就重复绑定一次事件，最终扫码回车时可能触发多次insert_row()。
2. 固定2秒延迟过于死板，无法适配网络波动导致的加载时长变化。

下面是两种更合理的修复方案，优先推荐第一种：

方案一：跟踪Autocomplete请求状态（推荐）

通过标记请求状态，确保等Autocomplete加载完成后再执行回车逻辑，避免硬等固定时长：

$(function() {
    // 标记Autocomplete是否正在加载数据
    let isAutocompleting = false;

    $("#skill_input").autocomplete({
        source: "fetchData.php",
        minLength: 3,
        autoFocus: true,
        select: function( event, ui ) {
            $("#code").val(ui.item.id); 
            $("#item_description").val(ui.item.value);  
            $("#skill_input").val("");
        },
        search: function() {
            // 开始搜索时标记为加载中
            isAutocompleting = true;
        },
        response: function( event, ui ) {
            // 请求完成后取消加载标记
            isAutocompleting = false;
        }
    });

    // 键盘事件只绑定一次，放在Autocomplete初始化外
    $("#skill_input").keydown(function(e) {
        if(e.which === 13) {
            e.preventDefault();
            
            const inputVal = $(this).val().trim();
            if(!inputVal) return;

            // 如果还在加载，就轮询等待加载完成再执行
            if(isAutocompleting) {
                const checkTimer = setInterval(() => {
                    if(!isAutocompleting) {
                        clearInterval(checkTimer);
                        insert_row();
                    }
                }, 100); // 每100ms检查一次状态
            } else {
                // 无加载请求，直接执行
                insert_row();
            }
        }
    });
});

方案二：优化固定延迟（简单版）

如果不想改逻辑，至少要把事件绑定移到外面，避免重复绑定，同时把延迟调整为略长于你的实际加载时长：

$(function() {
    $("#skill_input").autocomplete({
        source: "fetchData.php",
        minLength: 3,
        autoFocus: true,
        select: function( event, ui ) {
            $("#code").val(ui.item.id); 
            $("#item_description").val(ui.item.value);  
            $("#skill_input").val("");
        }
    });

    // 键盘事件仅绑定一次
    $("#skill_input").keydown(function(e) {
        if(e.which === 13) {
            e.preventDefault();
            
            const inputVal = $(this).val().trim();
            if(inputVal.length > 0) {
                setTimeout(() => {
                    insert_row();
                }, 1200); // 设为1.2秒，比你的1秒加载时长略长
            }
        }
    });
});

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