javascript - 动态更新的实时标题(AJAX+jQuery)

Question

我有一个网站，用户可以在访问该网站时获取收件箱消息和通知。 (就像在 Facebook 上一样，当您收到通知时，您会在图 block 的开头看到 (1))

目前我有一个 ajax 请求，它可以获取标题必须显示的数据。它很有魅力，但问题是该文件每 10 秒调用一次。如果用户有 10 个页面选项卡，则此文件将被调用 10x10=100 次。如果我的网站有数千个用户，您就会明白它将产生多少负载。

我虽然只在事件选项卡上运行 javascript，但如何更新网站所有打开的选项卡的标题？还有其他建议吗？

这是我的代码

var oldtitle=$(document).attr("title");
var checker=function(){
    $.ajax({
        url : 'live_title.php',
        type : 'POST',
        success : function(data) {
            ... code ....
            ... code ....
            ... code ....

            if (sum>0) {
                $(document).attr("title", "("+sum+") "+oldtitle);
            }
        }
});
}

setInterval(checker,20000);
checker();

Answer 1

缓存机制似乎是正确的方法。

第一个想法:使用 HTTP 缓存

请务必添加一个参数作为查询字符串，并将当前时间戳四舍五入到前十分之一秒。

确保您的 Web 服务器发送正确的 header 以使 HTTP 缓存正常工作。最好使用 GET 请求。

示例:

$.ajax({
    url : 'live_title.php',
    type : 'GET',
    success : function(data) {
        // code
    },
    data: {t: Math.floor((+new Date())/10000)}
}
// we send a request similar to live_title.php?t=142608488

第二个想法:使用window.localStorage作为辅助本地缓存。

除了第一个想法:

var getCache = function(t) {
     if (window.localStorage) {
         var liveTitle = localStorage.getItem('liveTitle') || {};
         return liveTitle[t] || null;
    }
};
var setCache = function(t, data) {
    if (window.localStorage) {
        window.localStorage.setItem('liveTitle', {t:data});
    }
}

var run = function() {
    var t = Math.floor((+new Date())/10000);
    var cache = getCache(t);

    var success = function(data) {
        /*code*/
    };

    if (cache) {
        success(cache);
    }
    else {
        $.ajax({
            url : 'live_title.php',
            type : 'GET',
            success : function(data) {
                setCache(t, data);
                success(data);
            },
            data: {t: t}
        }
    }
}