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
})

- vijay tyagi

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中。

- Ian

---

虽然我一直在寻找实际上同步事件的东西，但这暂时解决了问题，感谢Ian和Krypthonite的关注。但是我仍然面临一个与jQuery UI对话框有关的问题，它似乎会阻止点击事件，实际上我正在展示一个由jQuery UI对话框制作的加载器，而当ajax正在进行时，但当我使用它时，点击事件从未被触发，似乎阻止了点击事件，有什么想法可以解决这个问题吗？ - vijay tyagi

@vijaytyagi 嗯，我认为这是你可以做的最好的事情（我提出的逻辑，而不是确切的代码）来“同步”，因为我所知道的没有真正的同步。但是，你说的点击事件被“阻止”是什么意思？以什么方式？你有一个 jsFiddle 设置来演示你的场景吗？ - Ian

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
    }
});

现在每次调用clickFunction都会被记录下来，并在ajax请求完成后执行。

- jovobe