jQuery 使用回调在 AJAX 请求中中断循环

jQuery Break loop in AJAX Request with Callback

本文关键字：请求 中断 循环 AJAX 回调 jQuery      更新时间：2023-09-26

我有点坚持我的脚本：我正在尝试通过jQuery和AJAX实时搜索我的页面。在这个例子中，我想在 2 个站点中搜索关键字，我想在找到某些内容时中断 AJAX 循环：

var urls = [
    'http://docs.db-dzine.com/woocommerce-advanced-categories/',
    'http://docs.db-dzine.com/woocommerce-catalog-mode/',
];
var found = false;
$.each(urls, function(i, url) {
    ajaxSearchPage(url, keyword, function(found) {
        console.log(found);
        if(found) {
            return true;
        }
    });
    if(found) {
        return true;
    }
});

我不知道如何打破这里的循环...请帮忙。

还有我的 AJAX 函数：

var ajaxSearchPage = function(url, keyword, callback) {
    $.ajax({
        url: url, 
        type: "GET",
        dataType: "html",
        success: function(response) {
            // Do not load images
            var page = response.replace(/<img/gi, '<noload');
            // Create parsable body for jQuery
            var body = $('<div id="body-mock">' + page.replace(/^['s'S]*<body.*?>|<'/body>['s'S]*$/ig, '') + '</div>');
            // Find the keyword in content
            var content = body.find('#content:containsNC("'+ keyword +'")');
            if(content.length > 0) {
                searchResultsWrapper.show();
                callback(true);
            } else {
                callback(false);
            }
        }
    });
};

jQuery文档指出：

我们可以在特定迭代中打破$.each()循环，方法是使 回调函数return false .返回non-false与 在 for 循环中继续语句;它将立即跳到下一个 迭 代。

AJAX 调用是一个延迟操作，因此整个循环可能会运行。这是因为您无法知道所有网络请求何时完成。如果你看一下jQuery.ajax，你会注意到它返回了一个jqXHR对象。jqXHR 有一个abort方法来取消网络请求。

因此，我们真正想做的是在获得所需结果后取消所有请求。为此，我们必须将请求排队，然后取消。

var ajaxQueue = [];
$.each(urls, function(i, url) {
    ajaxQueue.push(ajaxSearchPage(url, keyword, function(found) {
        if(found) {
            ajaxQueue.forEach(jqXHR=>jqXHR.abort());
        }
    }));
});
相关文章：