用户结束输入时为多个同class的input绑定doneTyping函数问题

没问题呀！当然可以让所有带.typing类的输入框共用同一个doneTyping函数～你的代码没生效主要是有个小细节没处理对，我帮你梳理并修正一下：

原代码的问题点 #

你之前的代码里用$('.typing').val()来判断输入内容，这会取到所有.typing输入框的第一个值，而不是当前正在输入的那个输入框的内容。这就会导致逻辑混乱——比如你在第二个输入框输入后清空，但第一个输入框有值的话，定时器还是会触发，反过来也一样，所以才会出现不符合预期的情况。

修正后的代码 #

下面的代码会给每个输入框单独维护定时器，确保它们之间不会互相干扰，同时共用同一个doneTyping函数：

$(function() {
    console.log('ready');
    const doneTypingInt = 5000;

    // 遍历每个.typing输入框，单独绑定事件和定时器
    $('.typing').each(function() {
        let timer;

        // 键盘抬起事件
        $(this).keyup(function() {
            clearTimeout(timer);
            // 用$(this)获取当前触发事件的输入框内容，trim排除纯空格情况（可选）
            if ($(this).val().trim()) {
                timer = setTimeout(doneTyping, doneTypingInt);
            }
        });

        // 可选：输入框失去焦点时立即触发（避免用户输入完直接离开等待定时器）
        $(this).blur(function() {
            clearTimeout(timer);
            if ($(this).val().trim()) {
                doneTyping();
            }
        });
    });

    // 共用的结束输入函数
    function doneTyping() {
        console.log('function doneTyping');
        // 如果需要知道是哪个输入框触发的，可以修改成带参数的形式：
        // 比如在setTimeout里传当前元素：timer = setTimeout(() => doneTyping($(this)), doneTypingInt);
        // 然后函数改成：
        // function doneTyping($currentInput) {
        //     console.log('触发的输入框：', $currentInput);
        // }
    }
});

关键优化点 #

• 用.each()遍历每个输入框，给每个输入框分配独立的timer变量，避免多个输入框的定时器互相覆盖。
• 用$(this)获取当前触发事件的输入框，确保判断的是当前输入框的内容。
• 可选的blur事件处理，提升用户体验，避免用户离开输入框后还要等待定时器触发。

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