javascript - 在 JavaScript 中同步模糊和点击事件

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。