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

あなたのコメントに答えるために。私が想定し：

  • 検証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;
    });
});

また、「クリック」の代わりにフォーム自体で「送信」イベントを使用することをお勧めします（送信のデモ）

于 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が実行されるのを待たずに引き続き実行されます。

Web フロントエンド プログラミングに慣れるために、DOMを深く研究することをお勧めします。さまざまな検索エンジンを使用して、優れたドキュメントを見つけることができます。

于 2013-04-29T05:36:50.880 に答える