2016-04-28 9 views
0

この質問は既に返信されていますが、積極的に検索したにもかかわらずStackoverflowに関連するものは見つかりませんでした。.off()、.on()が呼び出されたときにイベントがJqueryによって延期される可能性はありますか?

私は現在、私にとって自然ないないようですが、その理由があるかもしれない私のスクリプト、行動の一つで非常に奇妙な行動に遭遇してい

(私も見つけられませんでした):

実は、私のフォーム入力(選択とラジオ)を変更することによって、特定のデータ(重量、価格など)を計算するプログラムが呼び出されます。その間、最終製品をカートに追加しないでください。フォーム入力を変更すると、この送信ボタンは"disabled"(コールバックのおかげで余分な処理が行われます)、on('click')リスナーはoff()で無効になります。

計算が終了すると、プログラムはコールバック関数を追加してボタンをクリックできるようになりました。

ボタンが無効(ポストoff())の場合、ボタンをクリックすると何もトリガーされませんが、計算が終了し、そのボタンにリスナーが追加された場合、コールバックはそのボタンは何もせずに呼び出されます。 on()リスナーがコールバックをトリガするために戻った後にもう一度クリックする必要があるので、それは私にとって非常に奇妙であると感じていますが、おそらく私が気づいていない内部のイースターエッグまたは機能です。

function callback() { 
    // >> 
    // ... 
    // << 
} 

function start() { 
    $(".button").off("click"); 
} 

function finish() { 
    $(".button").on("click", callback); 
} 

function process() { 
    start(); 

    // >> 
    // some inner ajax calls 
    // << 

    finish(); 
} 

$(".button").on("click", callback); 

あなたは何が起こっているか考えていますか?

お気軽にお問い合わせください。必要な場合は、さらに詳しい情報をお尋ねください。

EDIT:https://jsfiddle.net/Cr3aHal0/nfon051x/21/

+0

どのように私たちはあなたのコードを実行するのですか? – Rayon

+0

Fiddleをデモするために設定できますか? (Sidenote:あなたは本当にon'ingとoff'ingする必要はありません;単にハンドラをアクティブにしておき、無効状態のボタンから来た場合はfalseを返します) – Utkanos

+0

@Utkanos、実際は ' – Rayon

答えて

1

http://javascript.info/tutorial/events-and-timing-depth

を参照してください:尋ねたとして、コンテキストがほぼ同じであったとしても、ここで私は私の場合を紹介するために設定したフィドルですが、残念ながら私は上記のケースを再現するために管理します

は、要約すると:

ほとんどのブラウザでは、同期呼び出しでブロックされているUIとJavaScript、のための単一のスレッドを使用しています。 offonの間のコードは同期呼び出しです

JavaScript実行がレンダリングをブロックします。イベントは、DOMイベントを除いて非同期に処理されます。

非同期イベントが発生すると、イベントキューに入ります。

ブラウザはなど、キューをチェックし、イベントを処理し、イベントループと呼ばれる内部ループを、持っている機能を実行

たとえば、ブラウザがあなたのonclickを処理ビジー状態である、と別のイベントは(バックグラウンドで起こった場合には別のクリックのように)、キューに追加されます。 onclickハンドラが完了すると、キューがチェックされ、スクリプトが実行されます。 (あなたのケースでは、あなたが戻って上のイベントハンドラを投入した後)


どのようにあなたのシナリオではこの問題を解決するのですか?

イベントハンドラをオンまたはオフにする代わりに、ボタンを無効にしてください。無効のボタンはクリックイベントを取得しません。

また、例えば、クリックキューがクリアされた後に発生するであろう、ハンドラを有効にするためのsetTimeoutを使用します。

setTimeout(function() { $(".button").on("click", callback); }, 10); 
+0

ちょっと@ freedomn-mよく説明された答えをありがとう!私はイベントキューやjqueryにリンクされた類似のものについては何かを覚えていましたが、そのように多くは掘り下げませんでした。私は問題のすべてを指定しませんでしたが、 "プロセス"として示されているプロセスは、キャンバスアプリケーションです。これは、入力によって決定されたデータに基づいてスプライトを描画することです(スプライトの読み込みのために非同期なプロセスなので)フォーム。私は "無効"のヒントを使いましたが、うまくいきます。また、setTimeoutに試してみてください。みんなとあなたに特に感謝します:) – Cr3aHal0

関連する問題