Question

我有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秒，因为我想暂时显示一个新对话框。我该如何实现这种延迟？

Answer 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 
    }
}

回答你的评论。我假设：

如果验证为false，则要阻止点击事件，
你在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;
    });
});

我还建议在表单上使用“submit”事件而不是“click”（the demo of submit）

Answer 2

您可以使用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以更加熟悉网络前端编程。您可以使用各种搜索引擎找到很酷的文档。

如何在JavaScript中延迟5秒

2 个答案: