JavaScript 仅在最后一次被调用时才运行函数

Question

我在使用 Javascript 函数更新 Bootstrap 微调器时遇到问题，一般情况下它工作正常，当我多次点击时出现问题，我使用 ajax 更新为购物车选择的产品数量。

如果我只在按钮中单击一次效果很好，但如果单击多次以将数量增加 10，则该函数将执行 10 次并生成 10 个响应。这有点烦人。

这是函数:

    var contador = 0;
        function UPDATE_SUM(cant,modo,precio,prod_id,inv_id,lim){
    var canti = document.getElementById(cant).value;
    var quantity = canti;
    if(modo == "up"){
        var cantidad = parseInt(canti) + 1;
        if (cantidad > 0 && cantidad <= lim){
            quantity = cantidad;
            document.getElementById(cant).value = quantity;
            x.request('r:ajax/u.php?cant='+cantidad+'&id='+prod_id+'&inv='+inv_id+'; rl:resp');
        }
    }else if(modo == "down"){
        var cantidad = parseInt(canti) - 1;
        if (cantidad > 0){          
            quantity = cantidad;
            document.getElementById(cant).value = quantity;
            x.request('r:ajax/u.php?cant='+cantidad+'&id='+prod_id+'&inv='+inv_id+'; rl:resp');
        }
    }
    console.log("UPDATE_SUM "+contador);
    var precio = parseFloat(precio);
    var sub_total = precio*quantity;
    contador++;
    setTimeout(function(){
        updtQty(prod_id,sub_total,quantity);
    },1000);
    calcSeguro();
    calcTurcoSafe();
    var envio = document.getElementById('inpenvio');
    var turcosafe = document.getElementById('inpturcosafe');
    var seguro = document.getElementById('inpseguro');
    TOTALIZAR(envio,turcosafe,seguro);
}

function updtQty(id,sub_total,qty){
    contador--;
    console.log("updtQty "+contador);
    if(contador == 0){
        $("#resp").fadeIn().delay(5000).fadeOut();
        document.getElementById('sub_total'+id).innerHTML = 'Bs. '+decimales(sub_total,2);
        document.getElementById('subt'+id).value = sub_total;
    }
}

这是处理程序:

<div class="custom-quantity-input">
                        <input type="text" name="cantidad[]" id="cant6" value="1" readonly="">
                        <input type="hidden" name="subtotal[]" id="subt6" value="135000">
                        <a href="javscript:;" onclick="UPDATE_SUM('cant6','up','135000','6','1','25');" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up"></i></a> <a href="javascript:;" onclick="UPDATE_SUM('cant6','down','135000','6','1','25');" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down"></i></a></div>

任何帮助将不胜感激

Answer 1

不要在 UPDATE_SUM 方法中执行动画。相反，在函数外部创建一个新的计数器变量，在 UPDATE_SUM 内部递增它，并将动画延迟到一个具有 500 毫秒延迟的新函数(因此将计数器递增 1 并以 500 毫秒调用新函数超时/延期)。在动画函数内部，将计数器减一，并且仅在计数器达到 0 时才执行动画。这将确保如果用户每 500 毫秒点击按钮的速度快于一次，则动画仅播放一次。您可以调整超时持续时间以更好地适应您的用户体验。