javascript - 如何防止重新获取AJAX数据？

Question

我使用的是 javascript，但没有使用 jQuery。

假设我的数据库中有 3 个用户 [Kim,Ted,Box] 和 3 个按钮，如下所示:

<button class="user">Kim</button>
<button class="user">Ted</button>
<button class="user">Box</button>
<div id="displayArea"></div>

如果用户单击任何按钮，它将在 div 中显示用户信息。

假设我点击 Kim 按钮，它使用 ajax 并显示 Kim 的信息。现在我单击 Ted，它还会调用一个新的 ajax 函数来获取数据。但是当我再次单击 Kim 时，我调用新的 ajax 函数来获取数据，而不是从缓存或某个地方获取数据。如果之前已经加载过数据，那么如何在不从ajax函数获取数据的情况下实现它？

我需要这个的原因是因为我不希望用户等待再次获取他们之前加载的数据。

Answer 1

通过创建一个负责缓存并从缓存返回数据或发出 Ajax 请求的函数来添加一层抽象。例如:

var getDataForUser = (function() {
    /**
     * We use an object as cache. The user names will be keys.
     * This variable can't be accessed outside of this function
     */
    var cache = {}; 

    /**
     * The function that actually fetches the data
     */
    return function getDataForUser(user, callback) {
        if (cache.hasOwnProperty(user)) { // cache hit
            callback(cache[user]);
        } else {
            // somehow build the URL including the user name
            var url = ...;
            makeAjaxRequest(url, function(data) { // cache miss
                cache[user] = data; // store in cache
                callback(data);
            });
        }
     };
}());

然后你打电话

getDataForUser('John', function(data) { /*...*/ });

两次，第二次会命中缓存。