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

Question

我在使用Javascript函数更新引导程序微调器时遇到了一个问题，通常它运行良好，当我多次单击时就会出现问题，我使用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内递增，并将动画延迟到具有500ms延迟的新函数（因此，将计数器递增一，并使用500ms超时/延迟调用新函数）。在动画函数中，将计数器递减一，并且只有在计数器达到0时才执行动画。这将确保如果用户点击按钮的速度超过每500ms一次，则动画只播放一次。您可以使用超时持续时间来更好地适应您的用户体验。