jQuery绑定keyup与change事件点击页面时Ajax重复触发问题

给携带eventclass类的表单元素同时绑定keyup、change事件，实现用户输入/选择选项后做2秒防抖延迟，再发起Ajax请求拉取搜索结果的功能，整体运行正常，但存在异常：用户停止输入后点击页面body任意位置时，Ajax请求会重复执行。

JS逻辑 #

$(".eventclass").on('keyup change', function (){

    var txt = $('#search_text').val();
    var st = $('input[type=radio]:checked', '.radiostatus').val();
    var act_id = $('.actid').val();
    var child_id = $('.childid').val();

    if(txt != '' || st !='' || act_id !='' || child_id !='')
    {
        $('#maindiv').hide();
        $("#loadi").show();

        if (globalTimeout != null) {
            clearTimeout(globalTimeout);
        }

        globalTimeout = setTimeout(function() {
            globalTimeout = null;
            $.ajax({
                url:"activity_post_load.php",
                method:"post",
                data:{
                    search:txt,
                    status: st,
                    actid: act_id,
                    childid: child_id
                },
                dataType:"text",
                success:function(data)
                {

                    setTimeout(function() {
                        $("#loadi").hide();
                        $('#results').html(data);
                    }, 1000);
                }
            });
        }, 2000);
    }else{
        $('#results').html('');
        $('#maindiv').show();
    }
});

页面HTML结构 #

<div class="row fx-wrap">
    <div class="form-group col-xs-12 col-sm-5 col-md-6">   
    <label class="form-label"> Search Posts</label>  
    <input type="text" name="keysearch" id="search_text" 
    placeholder="Search by sightseeing Name" class="form-control 
    eventclass" placeholder="Search Sightseeing places" />           
    </div>
    <div class="form-group col-xs-12 col-sm-2 col-md-2">
    <label class="form-label"> Act_id </label>
    <select name="act_id" class="form-control actid eventclass"> 
    <option value="">PARENT</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    </select>
    </div>

    <div class="form-group col-xs-12 col-sm-2 col-md-2">
    <label class="form-label"> Child_id </label>

    <select name="child_id" class="form-control childid eventclass"> 
    <option value="">CHILD</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    </select>
    </div>

    <div class="form-group col-xs-12 col-sm-4 col-md-2">
    <div class="radiostatus">
    All <input type="radio" class="status eventclass" name="stat" 
    value="all"><br>
    Status 0 <input type="radio" class="status eventclass" name="stat" 
    value="zero"> <br>
    Status 1 <input type="radio" class="status eventclass" name="stat" 
    value="1">  
    </div>
    </div> 

    </div>

     <div class="table-responsive" id="maindiv"></div>

核心原因是事件绑定逻辑不合理：

1. 给文本输入框同时绑定了keyup和change事件，而input的change事件触发规则是值发生变化且元素失去焦点。用户输入完成后输入框仍处于聚焦状态，点击页面空白位置时输入框失焦，就会触发change事件，再次执行防抖和Ajax逻辑，造成重复请求。
2. 取值时机存在问题：当前代码在事件触发时就获取表单值存入闭包，如果防抖等待期间用户又修改了其他表单项，最终发起请求时用的还是旧值，会导致搜索结果不准确。

1. 按元素类型拆分绑定事件，避免重复触发：
   • 文本搜索输入框只绑定keyup事件，不需要绑定change
   • select下拉框、radio单选按钮只绑定change事件，不需要绑定keyup
2. 调整取值逻辑：把获取表单参数的代码放到setTimeout回调内部执行，保证发起请求时取到的是最新的表单值
3. 优化防抖变量作用域，避免全局变量污染
4. 可选优化：增加上一次请求参数缓存，如果本次请求参数和上次完全一致，直接终止请求，进一步避免重复调用。

修复后的JS代码参考：

// 防抖计时器放在局部作用域，不要挂全局
let searchTimeout = null;
// 缓存上一次请求参数，避免完全相同的参数重复请求
let lastRequestParams = null;

// 文本输入框绑定keyup
$("#search_text.eventclass").on('keyup', triggerSearch);
// 下拉、单选框绑定change
$(".actid.eventclass, .childid.eventclass, .radiostatus .eventclass").on('change', triggerSearch);

function triggerSearch() {
    // 每次触发先清掉之前的防抖计时器
    if (searchTimeout) {
        clearTimeout(searchTimeout);
    }

    const txt = $('#search_text').val();
    const st = $('input[type=radio]:checked', '.radiostatus').val();
    const act_id = $('.actid').val();
    const child_id = $('.childid').val();

    // 参数为空时清空结果
    if(!txt && !st && !act_id && !child_id) {
        $('#results').html('');
        $('#maindiv').show();
        return;
    }

    $('#maindiv').hide();
    $("#loadi").show();

    searchTimeout = setTimeout(function() {
        searchTimeout = null;
        // 防抖到点后重新取最新值
        const requestParams = {
            search: $('#search_text').val(),
            status: $('input[type=radio]:checked', '.radiostatus').val(),
            actid: $('.actid').val(),
            childid: $('.childid').val()
        };

        // 如果参数和上次完全一致，不重复发请求
        if (lastRequestParams && JSON.stringify(requestParams) === JSON.stringify(lastRequestParams)) {
            $("#loadi").hide();
            return;
        }

        $.ajax({
            url:"activity_post_load.php",
            method:"post",
            data: requestParams,
            dataType:"text",
            success:function(data) {
                lastRequestParams = requestParams;
                setTimeout(function() {
                    $("#loadi").hide();
                    $('#results').html(data);
                }, 1000);
            }
        });
    }, 2000);
}

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