Question

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

我实现了以下内容：

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

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

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

Answer 1

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

var timeout_id;
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.
        timeout_id = setTimeout(waitForResponse, 3000);
    });
}

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

waitForResponse();

Answer 2

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

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

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

2 个答案: