Question

我发现很难同步模糊和点击事件。场景如下：我有一个页面，其中有一个文本框和一个按钮。现在我有一个文本框的模糊事件处理程序，它基本上发出一个AJAX请求并更新页面的某些部分。此外，我还有一个按钮的点击处理程序，可以完成其他工作。

现在问题在于，因为我在文本框上有一个模糊事件处理程序，当我在文本框中输入内容并直接单击按钮时，它会触发模糊和单击事件（如预期的那样）。问题是同步两者，因为点击处理程序只应在模糊处理程序返回后执行（如果有任何模糊事件）。

示例代码如下：

 $('#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
})

Answer 1

尝试这样的事情：

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。

Answer 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的每次调用。

在JavaScript中同步模糊和单击事件

2 个答案: