Javascript 如何在对话框关闭时停止重复拉动JSON

在我的web应用程序中，我使用带有微调器的对话框来指示应用程序正在等待服务器响应。假设通过单击“取消”按钮，用户可以停止等待响应

我实现了如下所示：

function waitForResponse () {
    // pull jsons until it's ok
    $.ajax({
        url: ...,
        dataType: 'json'
    }).done(function (rsp, status) {
        // OK. Close the wait dialog.
        $('div#waitdialog').dialog('close');
    }).fail(function (rspobj, status, msg) {
        // Not yet. Pull it again.
        setTimeout(waitForResponse, 3000);
    });
}

$('<div id="waitdialog">')
    .appendTo('body')
    .append(spinner())
    .dialog({
        buttons: {
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function (event, ui) {
            $(this).remove();
        }
    });

waitForResponse();

问题是我不知道如何停止在取消单击时拉JSON。我会使用全局变量，但我认为这不是一个好方法

---

UPD。问题不在于如何停止ajax请求。它是关于如何以适当的方式通知拉取过程，避免全局变量。

您必须清除超时，查看新的超时id变量

---

找到以下不带全局变量的解决方案-只需检查页面上是否存在该对话框

function waitForResponse () {
    if (0 === $('div#waitdialog').length) {
        // Looks like User canceled it.
        return;
    }
    // pull jsons until it's ok
    $.ajax({
        url: ...,
        dataType: 'json'
    }).done(function (rsp, status) {
        // OK. Close the wait dialog.
        $('div#waitdialog').dialog('close');
    }).fail(function (rspobj, status, msg) {
        if (0 !== $('div#waitdialog').length) {
            // Not yet. Pull it again.
            setTimeout(waitForResponse, 3000);
        }
    });
}

$('<div id="waitdialog">')
    .appendTo('body')
    .append(spinner())
    .dialog({
        buttons: {
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function (event, ui) {
            $(this).remove();
        }
    });

waitForResponse();

---

可能重复您希望取消ajax请求本身，而不是它返回的JSON。谢谢，但这不是关于如何停止ajax请求。这是关于如何以适当的方式通知牵引程序。哦，我明白了。是的，亚瑟有正确的答案。@Rom098问题是我不知道如何停止在“取消”点击时拉JSON。不确定是否正确解释需求？如果.ajax返回错误，请再次调用$.ajax，直到成功调用$'divwaitdialog'。dialog'close'，能够调用$'divwaitdialog'。对话框'close'；从waitForResponse递归调用外部单击按钮？对于这样的小代码是的。。。您的waitForResponse也设置为global。使概念适应您的代码不必是全局的，可以将其设置在具有功能访问权限的更高级别范围内，即使是在就绪句柄中。顺便说一句，您的解决方案没有考虑到取消事件可能在发送AJAX请求之后，但在设置超时之前发生。是的。您可以在需要时单击cancel，ajax将不再被调用。您正在使用一个技巧来实现您的目标。您不想使用全局变量，但我认为您的jQuery DOM分析要知道页面上有多少divwaitdialog更重。@Arthur，我猜jQuery中有某种缓存，而且每3秒执行一次也没那么重。@Arthur，是的，在其他一些情况下，我会像我在问题中写的那样使用一个全局变量-我会使用一个标志指示用户取消了请求，我会使用标志检查而不是0==$'divwaitdialog'.length。

function waitForResponse () {
    if (0 === $('div#waitdialog').length) {
        // Looks like User canceled it.
        return;
    }
    // pull jsons until it's ok
    $.ajax({
        url: ...,
        dataType: 'json'
    }).done(function (rsp, status) {
        // OK. Close the wait dialog.
        $('div#waitdialog').dialog('close');
    }).fail(function (rspobj, status, msg) {
        if (0 !== $('div#waitdialog').length) {
            // Not yet. Pull it again.
            setTimeout(waitForResponse, 3000);
        }
    });
}

$('<div id="waitdialog">')
    .appendTo('body')
    .append(spinner())
    .dialog({
        buttons: {
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function (event, ui) {
            $(this).remove();
        }
    });

waitForResponse();