如何实现JQuery Ajax多点击仅触发一次指定Div重载？

要解决连续点击后重复刷新Div的问题，核心是把Div刷新操作改成「防抖执行」——也就是每次点击后，先取消之前待执行的刷新任务，只保留最后一次点击的刷新任务，延迟指定时间后再执行一次刷新。具体修改如下：

关键改动点 #

• 新增全局定时器变量，控制刷新的延迟执行
• 把原success里的刷新逻辑抽成独立函数，用防抖方式调用
• 调整AJAX的timeout时间（原100ms太短，容易请求超时失败）

修改后的完整代码 #

<script type="text/javascript">   
// 定义全局定时器变量，用于防抖
let refreshTimer;

// 抽离刷新Div的逻辑为独立函数
function refreshTargetDivs() {
    $('.hpstatus').show().load(" .hpstatus");
    $('#injur').show().load(" #injur");
    $("#homelineups").load(" #homelineups");
    $("#awaylineups").load(" #awaylineups");
}

$('body').on('click', ".addhplayer", function() {
    var absidplayer = $('#abshidplayer').find(":selected").val();
    var abstype = $('#abshtype').find(":selected").val();
    var absseasonid = $(this).attr('data-absseasonid');
    var absidclub = $(this).attr('data-absidclub');
    var absidmatch = $(this).attr('data-absidmatch');
 
    $.ajax({
        url: 'edit_absence.php',
        type: 'POST',
        timeout: 3000, // 把超时时间改长，避免请求未完成就中断
        data: {
            addtype: abstype,
            addhplayer: '1',
            addidplayer: absidplayer,
            addidclub: absidclub,
            addidmatch: absidmatch,
            addseasonid: absseasonid
        },
        success: function(response, textStatus, jqXHR){
            $('.hpstatus').show();
            $('#injur').show();
            
            // 防抖逻辑：每次成功后先清除之前的定时器，再设置新的延迟刷新
            clearTimeout(refreshTimer);
            // 这里的500ms是延迟时间，可根据需求调整（比如改成1000ms）
            refreshTimer = setTimeout(refreshTargetDivs, 500);
        },
        error: function() {
            // 可选：添加请求失败的提示
            alert("添加失败，请重试");
        }
    });
});
</script>

逻辑说明 #

1. 防抖定时器：refreshTimer变量用来记录当前待执行的刷新任务，每次AJAX成功后，先通过clearTimeout取消之前的任务，再重新设置新的定时器。这样连续点击时，只有最后一次点击的刷新任务会被执行。
2. 延迟时间调整：代码里的500ms是最后一次点击后等待刷新的时间，你可以根据实际操作习惯改成300ms、1000ms等。
3. AJAX超时优化：原代码的timeout:100太苛刻，网络稍有延迟就会请求失败，改成3000ms（3秒）更合理。

这样修改后，你连续点击4-5次添加按钮，所有AJAX请求都会正常发送到后台添加数据，最后一次点击结束后，等待你设置的延迟时间，才会一次性刷新所有需要更新的Div，不会再打断你的下拉选择操作。

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