Question

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

Using resize to getScript if above x pixels (jQuery)

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

在^中代码是什么。

getScript - How to only call if not already called

是一个例子，但我前一段时间尝试过该代码。

EX：

$(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，并且不再加载它。

Answer 1

我希望问题是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

此外，这样可以避免每次运行checkWidth函数时将变量重新设置为false，因为在测试之前它始终是假的 - 而不是您想要的。

P.S。使用$为javascript中的变量添加前缀是非常不寻常的，除非它是缓存的jQuery对象。

Answer 2

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>

Answer 3

所以没有人想出一个好的答案，也许是我不能很好地解释它。无论我解决了自己的问题。

它将加载脚本@ 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();

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

如何只使用一次getScript

3 个答案: