2

所以这是一个简化的问题（我用它作为参考，让这个问题变得简单......）

如果高于 x 像素（jQuery），则使用调整大小来获取脚本

如果我调用一个获取脚本的函数，如果该函数再次触发，它将不会再次加载脚本。

它在 ^ 中是哪个代码。

getScript - 如果尚未调用，如何仅调用

是一个例子，但我不久前尝试过该代码。

前任：

$(function() 
{
  var gotscript=false;   
  $(window).resize(function() 
  {
      //Dekstop
      if (window.innerWidth >= 768) 
      {
           if (!gotscript) 
           {
               // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
               $.getScript("js/desktop.js", function() 
               { 
                   gotscript=true;
               });
           }
       }
       if (window.innerWidth < 768) 
       {
           if (window.innerWidth >= 768) 
           {
               if (!gotscript) 
               {
                   // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
                   $.getScript("js/desktop.js", function() 
                   { 
                       gotscript=true;
                   });
               }
            }
       }
   }) .resize(); // trigger resize event
})

这会在任何窗口调整大小事件上加载脚本。

我忘了提...

var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();

    ////// LETS GET SOME THINGS IF IS DESKTOP 
    var $desktop_load = 0;
    if (windowsize >= 768) {
        if (!$desktop_load) {
            // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
            $.getScript("js/desktop.js", function() { 
                $desktop_load = 1;
            });
        }
    }
    ////// LETS GET SOME THINGS IF IS MOBILE
    if (windowsize < 768) { 

    } 
}

// Execute on load
checkWidth();

这将在窗口大小高于 768 时起作用，并且由于它只加载此函数一次，因此不会再次加载脚本。如果小于 768，我可以做些什么来使脚本加载，然后超过 768，而不是再次加载它。

4

3 回答 3

0

我希望问题与getScript异步有关，因此无法访问$desktop_load单独函数范围内的变量。

解决方法是创建$desktop_load一个全局变量。

试试这个，

var $desktop_load = 0; // <~~ move the variable into global scope
function checkWidth() {
    var windowsize = $window.width();

    ////// LETS GET SOME THINGS IF IS DESKTOP 
    // var $desktop_load = 0; // <~~ remove the variable from local scope

此外，这将避免您在每次运行该函数时将变量重新设置为 false，checkWidth因为在您以这种方式进行测试之前它总是为 false - 而不是您想要的。

ps 在 javascript 中使用前缀变量是很不寻常$的，除非它是一个缓存jQuery对象。

于 2012-07-09T11:36:15.463 回答
0

不能完全工作，cache: true因为它只是让浏览器决定是否应该再次加载文件。

您需要一个函数，例如getScriptOnce. 这种类型的功能有几种可能的解决方案。我为我的代码写了这样一个函数。您可以使用Firebug 或 Chrome 开发工具中的网络选项卡进行测试。这只会加载同一个文件一次。您只需要将getScriptOnce函数和全局数组复制到您的文件中ScriptArray。

注意不要在上一次之后立即下载第二次，因为该函数只是假设文件已加载，在调用回调之后，即在文件加载成功之后。

var ScriptArray = []; //global array of urls
function getScriptOnce(url, callback) {
    //the global array doesn't have such url
    if (ScriptArray.indexOf(url) === -1){
        if (typeof callback === 'function') {
            return $.getScript(url, function(script, textStatus, jqXHR) {
                ScriptArray.push(url);
                callback(script, textStatus, jqXHR);
            });
        } else {
            return $.getScript(url, function(){
                ScriptArray.push(url);
            });
        }
    }
    //the file is already there, it does nothing
    //to support as of jQuery 1.5 methods .done().fail()
    else{
        return {
            done: function () {
                return {
                    fail: function () {}
                };
            }
        };
    }
}

/*#####################################################################*/
/*#####################################################################*/


//TEST - tries to load the same jQuery file twice
var jQueryURL = "https://code.jquery.com/jquery-3.2.1.js";
console.log("Tries to load #1");
getScriptOnce(jQueryURL, function(){
  console.log("Loaded successfully #1")
});

//waits 2 seconds and tries to load again
window.setTimeout(function(){
  console.log("Tries to load #2");
  getScriptOnce(jQueryURL, function(){
    console.log("Loaded successfully #2");
  });
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

于 2017-08-10T19:52:10.037 回答
-1

所以没有人想出一个好的答案，也许是我解释得不好。不管我解决了我自己的问题。

它将加载脚本@ 768 或更高版本，并且只加载一次。但是，如果浏览器加载@小于 768，那么浏览器的大小会重新调整到 768 以上，它将加载脚本一次。我使用它通过 ajax 从 desktop.js 中加载代码块和图像。所以当它不工作时，它会重新加载内容，一个例子是一个加载 gif，它会显示并重置内容。这背后的想法是保持对 css 的响应，并在需要时使用 jquery 加载更大的循环。

$.ajaxSetup({
  cache: true
});

var $window = $(window);
var onlyonce = 0;

function resizing() {
  var windowsize = $window.width();
  if (windowsize >= 768) {
    getdeskTop();
}};

function getdeskTop() {
  if (onlyonce === 0) {
    grabScript ();
  } else {
  };
};

function grabScript() {
  onlyonce = 1;
  $.getScript("js/desktop.js", function() { });
}

$(window).resize(resizing);
resizing();

这可能有点难看，但我让它工作了:)。

于 2012-07-09T17:32:39.143 回答