0

我有 JavaScript 函数：

function validateAddToCartForm(object) {
   value = $(".product-detail-qty-box").val();
   if(!isInt(value) || value < 1) {
           $(".product-detail-error").show();
           return false;
   } else {
           $(".product-detail-error").hide();

           var product_name = $("#product_detail_name").text();
           var NewDialog = $('<div id="MenuDialog">\ ' + product_name + '</div>');
       NewDialog.dialog({            
           modal: true,
           title: "title",
           show: 'clip',
           hide: {effect: "fadeOut", duration: 1000}
       });

   }
   return true;
}

我需要在返回 true 之前暂停 3 到 5 秒，因为我想显示一个新对话框一段时间。我怎样才能实现这个延迟？

4

2 回答 2

1

在 js 中模拟延迟的唯一方法是超时回调。

将函数更改为：

function validateAddToCartForm(object,callback) {
   value = $(".product-detail-qty-box").val();
   if(!isInt(value) || value < 1) {
           $(".product-detail-error").show();
           callback(false);
   } else {
           $(".product-detail-error").hide();

           var product_name = $("#product_detail_name").text();
           var NewDialog = $('<div id="MenuDialog">\ ' + product_name + '</div>');
       NewDialog.dialog({            
           modal: true,
           title: "title",
           show: 'clip',
           hide: {effect: "fadeOut", duration: 1000}
       });

   }
   setTimeout(function() {callback(true);},5000);
}

在您调用它的地方，您应该执行以下操作：

代替

function somefunct() {
    //code before call
    if (validateAddToCartForm(object)) {
       //process true
    } else {
       //process false
    }
    //rest of the function 
}

放置类似的东西：

function somefunct() {
    //code before call
   validateAddToCartForm(object,function(ret) {
    {
     if (ret) {
        //process true
     } else {
        //process false
     }       
    //rest of the function 
    }
}

在回答您的评论。我假设：

  • 如果验证为假，您想阻止点击事件，
  • 您添加的所有元素 onclick="..." 都有类“.clickme”，

元素现在看起来像

 <input type="submit" onclick="return validateAddToCartForm(this)" class="clickme" />

所以第一次将元素更改为

<input type="submit" class="clickme" />

将以下内容添加到您的 javascript 中：

//this handle original click, drop it out, and only pass after validation
$(function () {
    $('.clickme').click(function (e) {
        var $t = $(this);
        //if event triggered return true        
        if (e.isTrigger) return true;
        validateAddToCartForm(this, function (ret) {
            if (ret) {
                $t.trigger('click');
            }
        });
        return false;
    });
});

我还建议在表单本身上使用“提交”事件而不是“点击”（提交的演示）

于 2013-04-29T05:12:19.540 回答
0

您可以使用在一定时间后seTimeout删除而不是阻止。#MenuDialog

function validateAddToCartForm(o){
  var keep_dialog_time = 5 * 1000; // five seconds.
  // Whatever...

  /* Use setTimeout(function, milliseconds) to delay deletion of #MenuDialog.
     This will get executed keep_dialog_time milliseconds after this call, and
     won't block. */
  setTimeout(function(){
    $('#MenuDialog').hide(); // maybe there is another function to do this, I'm not a jQuery guy really.
  }, keep_dialog_time);
  return true;
}

JavaScript 是单线程的。这意味着，当您阻止时，您会阻止所有内容。因此，DOM 使用事件循环模型，其中将回调分配给事件。这样的模型也存在于node.js中。上面，因为setTimeout没有阻塞，调用之后的代码将继续运行，而无需等待我们传递给的函数setTimeout被执行。

我建议深入研究DOM，以便更熟悉 Web 前端编程。您可以使用各种搜索引擎来查找很酷的文档。

于 2013-04-29T05:36:50.880 回答