Question

标题可能有点堰，但我真的不知道怎么称呼它。我的问题如下：我已经构建了一个API调用，我在我的html中使用这个javascript代码重复调用（每5个seonds）：

$(document).ready(function(){
    var openTicketRequests = [];
    function getOpenTickets() {
        // Abort all pending openTicketRequests
        for(var i=0; i<openTicketRequests.length; i++) {
            openTicketRequests[i].abort();
        }
        openTicketRequests.push(
            $.ajax({
                type: "GET",
                url: "ticket/get_open",
                dataType: "json",
                success: function(data) {
                    $(".open_tickets").empty(); // Empty the list of open tickets.
                    for (var i=0; i<data.length; i++) {
                        $(".open_tickets").append(data[i].id + "<br/>");
                    }
                }
            }));
        setTimeout(getOpenTickets, 5000);
    }
});

这很好用。有时我会在javascript中从不同的地方调用它，以便它立即运行。问题在于它每2.5秒更新一次。如果我再次呼叫它，则每5秒运行3次等等。运行该页面一段时间后，此呼叫每5秒进行约20次，而不是每5秒进行一次。

由于这个原因，我添加了openTicketRequests数组，我将其循环以中止现有的挂起调用，但这显然不能很好地工作。

所以我的问题是：我做错了什么？如何中止所有待处理的请求，使其仅每5秒运行一次？欢迎所有提示！

Answer 1

如果您希望代码每5秒运行一次并且对代码的临时调用应重置5秒间隔，那么您需要捕获setTimeout的返回值并使用clearTimeout清除它getOpenTickets内的 ^[MDN] ：

$(document).ready(function(){
    var openTicketRequests = [];
    var timeoutID = null;
    function getOpenTickets() {
        // First clear the timer.
        clearTimeout(timeoutID);

        // Abort all pending openTicketRequests
        for(var i=0; i<openTicketRequests.length; i++) {
            openTicketRequests[i].abort();
        }
        openTicketRequests.push(
            $.ajax({
                type: "GET",
                url: "ticket/get_open",
                dataType: "json",
                success: function(data) {
                    $(".open_tickets").empty(); // Empty the list of open tickets.
                    for (var i=0; i<data.length; i++) {
                        $(".open_tickets").append(data[i].id + "<br/>");
                    }
                }
            }));
        timeoutID = setTimeout(getOpenTickets, 5000);
    }
});

如果您希望代码每5秒运行一次，无论您是否以临时方式执行代码，我都会将通过调用本身创建常规调用的代码分开并使用setInterval < em> ^[MDN] 而不是setTimeout：

$(document).ready(function(){
    var openTicketRequests = [];
    function getOpenTickets() {
        // Abort all pending openTicketRequests
        for(var i=0; i<openTicketRequests.length; i++) {
            openTicketRequests[i].abort();
        }
        openTicketRequests.push(
            $.ajax({
                type: "GET",
                url: "ticket/get_open",
                dataType: "json",
                success: function(data) {
                    $(".open_tickets").empty(); // Empty the list of open tickets.
                    for (var i=0; i<data.length; i++) {
                        $(".open_tickets").append(data[i].id + "<br/>");
                    }
                }
            }));
    }


    setInterval(getOpenTickets, 5000);
});

现在，您可以随时拨打getOpenTickets ad hoc，但不会复合常规电话。

如何防止Javascript中增加的API调用量？

1 个答案:

参考