4

ぼかしイベントとクリックイベントを同期させるのが難しいと感じています。シナリオは次のとおりです。テキストボックスとボタンがあるページがあります。これで、テキストボックスのblurイベントハンドラーができました。これは基本的にAJAXリクエストを作成し、ページの一部を更新します。また、他の仕事をするボタンのクリックハンドラーもあります。

ここでの問題は、テキストボックスにぼかしイベントハンドラーがあるため、テキストボックスに何かを入力してボタンを直接クリックすると、ぼかしイベントとクリックイベントの両方が発生することです（予想どおり）。問題は、2つを同期することです。これは、クリックハンドラーは、ブラーハンドラーが戻ったときにのみ実行される必要があるためです（ブラーイベントが発生した場合）。

サンプルコードは次のとおりです。

 $('#textbox').on('blur', function(){
//make an ajax request
});

$('#btn').on('click',function(){
//wait for the blur event to finish(if any) 
// then execute the code
})
4

2 に答える 2

2

次のようなものを試してください。

http://jsfiddle.net/8m7j5/2/

var blurring = [];
var expecting = false;

$(document).ready(function () {
    $('#textbox').on('blur', function () {
        // make an ajax request

        console.log("TEXTBOX BLURRED");

        blurring.push(1);    // Flag a new blur event

        $.ajax({
            url: "/echo/json/",
            complete: function () {
                setTimeout(function () {    // Simulate AJAX request taking 2 seconds
                    console.log("AJAX REQUEST COMPLETE");
                    blurring.pop();    // Flag completed blur event
                    checkClick();
                }, 2000);
            }
        });
    });

    $('#btn').on('click', function () {
        // wait for the blur event to finish(if any)
        // then execute the code

        console.log("ACTUALLY CLICKED BUTTON");

        expecting = true;
        checkClick();
    });
});

function checkClick() {
    if (expecting && blurring.length < 1) {
        console.log("CHECKING: EXPECTING CLICK AND NO MORE BLUR EVENTS");
        expecting = false;
        clickFunction();
    } else {
        console.log("CHECKING: EITHER NOT EXPECTING OR BLUR EVENT(S) STILL OCCURRING");
    }
}

function clickFunction() {
    console.log("EXECUTING CLICK FUNCTION");

    // Put your actual click code here
}

ボタンがクリックされたときに実際に起こりたいことを、に入れますclickFunction。

于 2012-10-17T18:17:22.480 に答える
2

ianpgallのコードが少し改善されました：

var functionsToCall = [];
var ajaxRunning = false;

$(document).ready(function(){
    $('#textbox').on('blur', function(){
        ajaxRunning = true;
        console.log("START AJAX REQUEST");
        $.ajax({
            url: "/echo/json/",
            complete: function () {
                setTimeout(function () {    // Simulate AJAX request taking 2 seconds
                    console.log("AJAX REQUEST COMPLETE");
                    ajaxRunning = false;
                    fireStackedCalls();
                }, 5000);
            }
        });
    })

    $('#btn').on('click',function(){
        if(ajaxRunning === true) {
            functionsToCall.push('clickFunction()');
        } else {
            clickFunction();
        }
    });

    function fireStackedCalls() {
        while(functionsToCall.length > 0) {
            toCall = functionsToCall.pop();
            eval(toCall);
        }
    }

    function clickFunction() {
        console.log("EXECUTING CLICK FUNCTION");

        // Put your actual click code here
    }
});

これで、ajaxリクエストが実行されると、clickFunctionのすべての呼び出しが記録されて実行されます。

于 2012-10-17T18:44:27.217 に答える