jQuery延迟了Ajax缓存 [英] jQuery deferred ajax cache

问题描述

我阅读了有关此问题的此问题的最高答案 a href ="http://api.jquery.com/category/deferred-object/" rel ="nofollow noreferrer"> jQuery Deferred .

I read the top answer to this question regarding the use of jQuery Deferred.

我正在遍历一组ID.对于每个ID，我需要从ajax请求中获取有关它的数据，或者从ajax请求中获取数据(如果ajax请求之前已经成功返回了数据).

I'm looping through an array of IDs. For each ID, I need to get data pertaining to it either from an ajax request, or from a cache if an ajax request had already successfully returned the data before.

在每个循环中，在处理该ID之前，我使用$ .when()来观察getData()是从缓存还是成功的ajax调用返回某些内容.当前的问题是，ID处理仍在继续进行，而没有等待getData()的ajax成功执行.

During each loop, I use a $.when() to observe whether getData() returns something from cache or a successful ajax call, before processing that ID. The current problem is that the ID processing proceeds anyways without waiting for getData()'s ajax to succeed.

一些伪代码:

var IDs = ["1", "2", "1", "3", "1"]; 
//ID "1" is repeated
//data for "1" should should require ajax get the first time
//subsequent processing should get data for "1" from dataCache

var dataCache = [];

function getData(ID){
    if (/*data for ID in dataCache*/){
        //return data pertaining to ID from dataCache
    } else {
        return $.getJSON("returnJSONDataByID/" + ID, function(resp){
            //push resp data to dataCache
        })
    }
}

for (/*each item i in IDs*/){
    $.when(getData(IDs[i])).then(function(){
        //process IDs[i] data

        //this is the resolved handler, which should be executed
        //when either getData() returns data from the dataCache,
        //or $.getJSON succeeds
        //PROBLEM: this is currently executing every loop and
        //and doesn't wait for the ajax to return resp
    })
}

推荐答案

问题是您的循环将立即触发所有getData调用，但结果仅在JSON调用返回后才存储在缓存中.因此，对于循环中的每个调用，缓存仍然为空，并且每个调用都会执行一个新的JSON请求.

The problem is that your loop will fire all getData calls immediately, but you results are only stored in the cache once the JSON call returns. Thus, the cache is still empty for every call in the loop and each will perform a new JSON request.

解决方案:将Deferred对象而不是结果存储在缓存中.

Solution: instead of the result store the Deferred object in the cache.

var IDs = ["1", "2", "1", "3", "1"];

var dataCache = {};

function getData(id) {
    if (id in dataCache) {
        console.log("Cache hit for ID " + id);
        return dataCache[id];
    } else {
        console.log("Retrieving data for ID " + id);
        var deferred = $.getJSON("http://jsfiddle.net/echo/jsonp/?callback=?", {
            id: id
        }, function(response) {
            console.log("Retrieved data for ID " + id);
        });
        dataCache[id] = deferred;
        return deferred;
    }
}

for (var i=0; i<IDs.length; i++) {
    $.when(getData(IDs[i])).then(function(result) {
        console.log("result: " + result.id);
    });
}

注意:这是有效的代码，您可以在jsFiddle中使用它.

Note: this is working code, you can play with it in jsFiddle.

这篇关于jQuery延迟了Ajax缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！