JQueryでこの問題を解決するにはどうすればよいですか？

Question

$("#id_address_input").bind("blur",function(e){ 
    //do a lot of stuff, set variables. 
}); 

だから、私はユーザーがそれをオフにすると、この事は解雇され、処理されるテキストボックスを持っています。

[OK]を、問題はこれです：

ユーザーがフォームに[送信]ボタンをクリックすると、このぼかし事が発射されます。そして、処理の途中で、フォームが提出されます。これはすべてを駄目にする。

これを修正するにはどうすればよいですか？ 私はform.submitに遅延を追加することを考えました。処理が終了するようにしました。しかし、これは悪い考えです。なぜなら、ユーザーのブラウザやGoogleマップがどれほど速いかを考えているからです。

Answer 1

そうでない場合は、ブラウザが提出するJavaScriptコードを中断しませんので、あなたは、その（などsetTimeout、非同期AJAX呼び出し、）ブラウザに「利回り」何かをしなければなりませんフォーム。それを証明する例については以下を参照してください。あなたはがblurハンドラ内からブラウザに与える何かをしている場合は

、あなたはsubmitハンドラでフォームの送信を防止し、その後（のさまざまなアクションを含むとき、すべてそれが提出され得る持っている必要がありますblurハンドラ）が準備完了です。これは少し複雑かもしれません。

最良の答えは、ブラウザに送信されているblurハンドラにあるものをすべて削除することです。あなたがそれを行うことができない場合、あなたはおそらく、フォームのロックカウンターを見て、提出ハンドラは、そのロックカウンタチェック抱えている：

// Somewhere, ensure the form has a lock count of zero 
$('#theForm').data('submitlock', 0); 

// Your blur handler increments the lock 
// In the blur handler: 
$('#theForm').data('submitlock', $('#theForm').data('submitlock') + 1); 
// ...and when done 
$('#theForm').data('submitlock', $('#theForm').data('submitlock') - 1); 

// The submit handler might look something like this: 
$('#theForm').submit(function() { 

    // Get a jQuery wrapper for the form 
    var $this = $(this); 

    // Locked? 
    if ($this.data('submitlock') > 0) { 
     // Yes, set up the recheck and prevent form submission 
     setTimeout(recheck, 10); 
     return false; 
    } 

    // Function to periodically retry submission 
    function recheck() { 
     // Still locked? 
     if ($this.data('submitlock') > 0) { 
      // Keep waiting 
      setTimeout(recheck, 10); 
     } 
     else { 
      // Nope, submit the form using the underlying DOM object's submit function 
      $this[0].submit(); 
     } 
    } 
}); 

Live example（以下、当社のブロッキングの例のバージョンを、それに更新しますブラウザへの収率）

フォームが新しいウィンドウに提出されている場合、新しいウィンドウには、ユーザーのクリックに直接対応してないので、あなたは）（ポップアップブロッカーの抵触実行することができることに注意してください。しかし、もしあなたがそういうことをやっていないなら、あなたは上の方といい形をしています。ここで

---

は、フォームが送信される前に、かなりの遅延（4秒）を引き起こすblurハンドラ（live copy）の例です：

HTML：

<form action='http://www.google.com/search' target='_new'> 
    <label>Search for: 
    <input type='text' name='q' value='foo'></label> 
    <br><input type='submit' value='Search'> 
</form> 

はJavaScript：

$('input[name=q]').blur(function() { 

    var end, counter; 

    display("Start blurring"); 
    counter = 0; 
    end = new Date().getTime() + 4000; 
    while (new Date().getTime() < end) { 
    ++counter; 
    if (counter % 100000 == 0) { 
     display("Still blurring"); 
    } 
    } 
    display("Done blurring"); 

}); 

テキストボックスにカーソルを置き、Searをクリックします。 ch。 4秒間の遅延が表示され、検索が新しいウィンドウで開きます。私はChrome、Firefox、Opera（Linuxの場合）、Windows 2000の場合はIE6、Windows XPの場合はIE7でこれをテストしました。すべて同じように動作しました。

Answer 2

フォームを送信するにはjavascriptを使用します。 onSubmitを呼び出す関数を記述し、blurイベントで起こるはずのものが終了したかどうかを確認します。その後、フォームのみを送信してください

Answer 3

フラグを設定してください？あなたのblurハンドラで

var doSubmit = true; 

$("#id_address_input").bind("blur",function(e){ 
    doSubmit = false; 
    //do a lot of stuff, set variables. 
    doSubmit = true; 
}); 

$("#form").submit(function(){ 
    if(doSubmit){ 
     return true; 
    }else{ 
     // keep checking until doSubmit is true 
     window.setInterval(function(){if(doSubmit){$("#form").submit();}},1000); 
     return false; 
    } 
});