在 jquery 表单序列化变量中设置 jquery 延迟

set jquery delay in jquery form serialize variable

本文关键字:jquery 设置 延迟 序列化 表单 变量      更新时间:2023-09-26

这是我使用 ajax 在购物车中添加产品的简单代码,但是当用户点击太快时,某些产品不会添加到购物车中。在第一行,我在调用 ajax 后使用序列化从表单中获取数据并将产品添加到购物车中。现在给我解决方案,我可以在其中放置超时或延迟以及类似的东西,以便执行有时会停止。

var datas = form.serialize();
            if(usefancy){
                $.fancybox.showActivity();
            }
            $.getJSON(vmSiteurl+'index.php?option=com_virtuemart&nosef=1&view=cart&task=addJS&format=json'+vmLang,encodeURIComponent(datas),
            function(datas, textStatus) {
                if(datas.stat ==1){
                    var txt = datas.msg;
                } else if(datas.stat ==2){
                    var txt = datas.msg +"<H4>"+form.find(".pname").val()+"</H4>";
                } else {
                    var txt = "<H4>"+vmCartError+"</H4>"+datas.msg;
                }
   setTimeout(function(){
       var datas = form.serialize();
    }, 3000); 
3000

相当于 3 秒(3000 毫秒)。

使用 setTimeout 是一种非常不可靠的变量更新方式(如果 jQuery 函数在 3 秒内无法执行怎么办?相反,您应该使用许多jQuery函数中可用的callback功能,并在该callback函数中设置变量。

编辑:对于用户点击太快的问题,您必须实施一个简单的锁定机制,以便在将商品添加到购物车时,禁用"添加到购物车"选项。这可以按以下方式完成:

var cartLock = false;     //means you can add items to cart

由于您需要捕获complete的能力,因此我推荐以下方法,

   $.ajax({
      type: "GET",
      url: url,
      dataType: "json",
      beforeSend: function(msg){
        cartLock = true;                 // Just before calling
      },
      success: function(msg){
        // your logic here
      },
      complete: function(){
        cartLock = false;                // After request completes
      }
    });

现在,您需要引入的最后一个检查是,只有在cartLock false时才会调用$.ajax()。希望这是有道理的。

只需将其包装在一个函数中:

var datas = '';
setTimeout(function(){
    datas=form.serialize();
},1000);

更好的方法

查找和事件,当用户完成添加产品(可能是单击的按钮或类似的东西)时触发,然后进行序列化和 ajax 调用。

假设您有一个带有id="sendProduct"的按钮

<button id="sendProduct">Send product</button>

您可以执行以下操作:

$("#sendProduct").click(function () {// Everytime user clicks "sendProduct" you will send info to the server.
    var datas = form.serialize();
    if (usefancy) {
        $.fancybox.showActivity();
    }
    $.getJSON(vmSiteurl + 'index.php?option=com_virtuemart&nosef=1&view=cart&task=addJS&format=json' + vmLang, encodeURIComponent(datas),
    function (datas, textStatus) {
        if (datas.stat == 1) {
            var txt = datas.msg;
        } else if (datas.stat == 2) {
            var txt = datas.msg + "<H4>" + form.find(".pname").val() + "</H4>";
        } else {
            var txt = "<H4>" + vmCartError + "</H4>" + datas.msg;
        }
    });
});