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的新函数（因此将计数器递增1并调用新函数500ms超时/延迟）。在动画功能内部，将计数器减1并且仅在计数器达到0时执行动画。这将确保如果用户点击按钮的速度比每500ms快一次，动画只播放一次。您可以使用超时持续时间来更好地适应您的用户体验。

JavaScript运行函数仅在其上次调用时才运行

1 个答案: