javascript - 如何确保javascript只加载一次

Question

我正在使用 jquery getScript() 调用 JS。

有时我可以看到文件已经加载（缓存资源）。因此，在刷新缓存页面时不会删除，并且会再次加载相同的文件。

由于同一文件的多个包含，我收到错误。

如何避免这种情况？

$.getScript("http://localhost:8888//../../demo.js", function() { console.log('Script is loaded.'); });

Answer 1

默认情况下，$.getScript将缓存设置设置为false。尝试将其设置true为查看是否可以解决您的问题：

$.ajaxSetup({
  cache: true
});

在您的通话之前添加以上内容，例如：

$.ajaxSetup({
      cache: true
    });

$.getScript("http://localhost:8888//../../demo.js", function() { console.log('Script is loaded.'); });

直接来自 jquery文档：

缓存响应

默认情况下，$.getScript() 将缓存设置为 false。这会将时间戳查询参数附加到请求 URL，以确保浏览器在每次请求时下载脚本。您可以通过使用 $.ajaxSetup() 全局设置缓存属性来覆盖此功能：

$.ajaxSetup({ cache: true }); 或者，您可以定义一个使用更灵活的 $.ajax() 方法的新方法。

示例： 示例：定义一个允许获取缓存脚本的 $.cachedScript() 方法：

jQuery.cachedScript = function( url, options ) { // 允许用户设置除 dataType、cache 和 url 之外的任何选项 options = $.extend( options || {}, { dataType: "script", cache: true,网址：网址}）；// 使用 $.ajax()，因为它比 $.getScript 更灵活 // 返回 jqXHR 对象，以便我们可以链式回调 return jQuery.ajax( options ); }; // 用法 $.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) { console.log( textStatus ); });

Answer 2

假设您的demo.js文件至少包含一个函数或变量，您可以在再次加载之前检查是否存在：

if (typeof(your_variable) === "undefined") {
  $.getScript("http://localhost:8888//../../demo.js", function() { console.log('Script is loaded.'); });
}

（your_variabledemo.js 中函数或变量的名称在哪里）

Answer 3

我相信如果它被缓存，浏览器将不会对它发出新的请求，它会知道加载缓存的版本，所以你只要启动你的 $.getScript 就好了。

它可能会再次出现在 chrome 开发人员工具的网络选项卡中，但时间将为 0，并且大小（内容）值会显示“（来自缓存）”，这将是测试实际情况的好方法。

Answer 4

Cashingvis 的好功能我之前通过 jquery 加载时解决了多次加载 js。我的问题是，当我通过 jquery 调用文件加载时，我在该加载文件中有一个 jquery 文件，现在它只加载一次，所以我现在只启用一次事​​件。非常感谢，祝您有愉快的一天。