Comment getScript une seule fois

Question

C'est donc une question simplifiée de ce (qui im ​​utilisant pour référence, pour rendre cette question facile ...)

Using resize to getScript if above x pixels (jQuery)

Si j'appelle une fonction qui reçoit script, si cette fonction se déclenche à nouveau, le script ne sera plus chargé.

Qui dans ce code est.

getScript - How to only call if not already called

est un exemple, mais je l'ai essayé ce code il y a quelque temps.

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 
}) 

Cette charge le script dans une fenêtre redimensionne événement.

J'ai oublié de mentionner ...

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(); 

Cela fonctionne lorsque la taille de la fenêtre est au-dessus 768, et depuis sa seule charge cette fonction une fois, il ne se charge pas à nouveau le script. Que puis-je faire pour que le script se charge s'il est inférieur à 768, puis dépasse 768, et ne le charge pas à nouveau.

Answer 1

Donc, personne n'a trouvé une bonne réponse, peut-être que c'était moi qui ne l'expliquais pas bien. Peu importe, j'ai résolu mon propre problème.

Il chargera le script @ 768 ou plus, et seulement une fois. Mais si le navigateur charge @ moins de 768 alors le navigateur est redimensionné au-dessus de 768, il chargera le script, une fois. Je l'utilise pour charger des blocs de code et des images à partir de desktop.js par ajax. Donc, quand ça ne fonctionnait pas, ça rechargeait le contenu, un exemple était un gif de chargement qui s'affichait et réinitialisait le contenu. L'idée était de rester réactif avec css, et d'utiliser jquery pour charger des boucles plus grandes en cas de besoin.

$.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(); 

Cela peut être un peu moche, mais je l'ai eu à travailler :).

Answer 2

Je pense que le problème est dû au fait que getScript est asynchrone et n'a donc pas accès à la variable $desktop_load qui se trouve dans une portée de fonction distincte.

Le correctif est de faire de $desktop_load une variable globale.

Essayez ceci,

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 

En outre, cela vous évitera réinitialisant la variable false chaque fois que vous exécutez la fonction checkWidth car il sera toujours faux avant votre test de cette façon - pas ce que vous voulez .

p.s. Il est assez inhabituel d'utiliser $ pour préfixer une variable dans javascript, sauf s'il s'agit d'un objet jQuery mis en cache.

Answer 3

Le cache: true ne fonctionne pas entièrement car il laisse simplement le navigateur décider si le fichier doit être chargé à nouveau ou non.

Vous avez besoin d'une fonction telle que getScriptOnce. Il existe plusieurs solutions possibles pour ce type de fonction.J'ai écrit une telle fonction pour mon code. Vous pouvez tester avec l'onglet réseau dans les outils de développement Firebug ou Chrome. Cela charge juste le même fichier une fois. Vous avez juste besoin de copier dans vos fichiers la fonction getScriptOnce et le tableau global ScriptArray.

Faites attention à ne pas télécharger la seconde fois immédiatement après la précédente, car la fonction suppose simplement que le fichier a été chargé, après l'appel du rappel, c'est-à-dire après le chargement réussi du fichier.

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>