在 JavaScript 中同步模糊和点击事件答案

【问题标题】：Synchronize blur and click events in JavaScript在 JavaScript 中同步模糊和点击事件
【发布时间】：2023-03-24 08:59:01
【问题描述】：

我发现很难同步模糊和点击事件。场景如下：我有一个页面，其中有一个文本框和一个按钮。现在我有一个文本框的模糊事件处理程序，它基本上发出 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
})

【问题讨论】：

标签： javascript events onclick synchronization onblur

【解决方案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 和 krypthonite 对此进行调查。但是我仍然面临 jquery ui 对话框的问题，它似乎阻止了点击事件，实际上我在 ajax 进行时显示了一个由 jquery ui 对话框制成的加载器，但是当我使用它时，点击事件永远不会被触发，它似乎阻止了点击事件，知道如何解决这个问题吗？
@vijaytyagi 好吧，我认为这是你能做的最好的（我提出的逻辑，而不是确切的代码）来“同步”，因为我知道没有真正的同步。你是什么意思点击事件被“阻止”了？以什么方式？您是否设置了 jsFiddle 来演示您的场景？

【解决方案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 的每次调用都会被记录并执行。

【讨论】：