8

helloworld.jsクリック回数に応じて複数回読み込まれるようです#load。これを言うのは、Google Chromes Developer Tools Network タブを見ると、helloworld.jsクリックした回数だけ表示されるから#loadです。

$(document).ready(function() {

    $("#load").click(function(){
        $.getScript('helloworld.js', function() {
            hello();
        });
    });

});

関数は次のhello()ようになります。

function hello(){
    alert("hello");
}

helloworld.jsすでにロードされているかどうかを検出することは可能ですか?

したがって、ロードされていない場合はロードし、ロードされている場合はロードしないでください。

#loadこれは、ボタンを 4 回クリックした場合に開発者ツールに現在表示されているものです。

ここに画像の説明を入力

4

4 に答える 4

10

ファイルが正常にロードされたときにフラグを設定します。フラグが設定されている場合は、ファイルのロードを再度スキップします。

このコードを試して、

    var isLoaded = 0; //Set the flag OFF 

    $(document).ready(function() {

        $("#load").click(function(){
            if(isLoaded){ //If flag is ON then return false
                alert("File already loaded");
                return false;
            }
            $.getScript('helloworld.js', function() {
                isLoaded = 1; //Turn ON the flag
                hello();

            });
        });

    });
于 2012-11-14T15:41:16.970 に答える
8

では、次のようにイベントを 1 回だけ発生させないのはなぜですか。

$("#load").one("click", function() {
   $load = $(this);
   $.getScript('helloworld.js', function() {
       hello();
       // bind hello to the click event of load for subsequent calls
       $load.on('click', hello); 
   });
});

これにより、後続のロードが防止され、グローバルの使用が回避されます

于 2012-11-14T15:43:21.570 に答える
6

もう 1 つのオプションは、.getScript()実行を許可することですが、スクリプトをブラウザーのキャッシュから取得して、毎回再ロードする必要がないようにします。

これを実現するには、次のコードを追加します。

$.ajaxSetup({
    cache: true
});

これはドキュメンテーション ページから取得したものです。

于 2012-11-14T15:55:19.387 に答える
3

ヘルパー関数を作成できます。

var getScript = (function() {
  var loadedFiles = {};
  return function(filename, callback) {
    if(loadedFiles[filename]) {
      callback();
    } else {
      $.getScript(filename, function() {
        loadedFiles[filename] = true;
        callback();
      });
    }
  };
})();
于 2012-11-14T15:43:36.377 に答える