動的負荷でjavascriptを消去する

Question

私は特別な画像のスクロールのためのjavascriptプラグインを持っています。スクロール側には、タイムアウトメソッドとそれらのタイムアウトから設定された値を持つ多くの変数が含まれています。

すべては完全に機能しますが、私が作業しているサイトでは、ページが動的に読み込まれる必要があります。この問題は、例えば、コンテンツがサイトに動的にロードされていることを意味するjquery load関数によって作成されたサイトの言語を変更した場合や、イメージスライダも同様です。

ここに大きな問題があります！ 2回目にイメージスライダーを読み込むと、以前の値はすべてタイマーだけでなく残ります。 javascriptプラグインのすべてをページリロードのようにクリアする方法はありますか？

私はこれまで多くのものを試していますので、少し助けていただければ幸いです！

ありがとうございます！

Answer 1

あなたは、スクリプトを再ロードするためにそのような何かをしたいかもしれません：

<script class="persistent" type="text/javascript">  
    function reloadScripts() 
    { [].forEach.call(document.querySelectorAll('script:not(.persistent)'), function(oldScript) 
    { 
     var newScript = document.createElement('script'); 

     newScript.text = oldScript.text; 
     for(var i=0; i<oldScript.attributes.length; i++) 
     newScript.setAttribute(oldScript.attributes[i].name, oldScript.attributes[i].value); 

     oldScript.parentElement.replaceChild(newScript, oldScript); 
    }); 
    } 

    // test 
    setInterval(reloadScripts, 5000); 
</script> 

は、私の知る限りでは、完全に古いものを削除して、同じ属性で別のものを作成するよりも、スクリプトをリセットする他の方法はありませんし、コンテンツ。少なくとも、Firefoxでは、ノードを複製してもスクリプトはリセットされません。

あなたはタイマーをリセットすると言いました。 clearTimeout()とclearInterval()を意味しますか？ Window.prototype.setTimeout()とWindow.prototype.setInterval()の両方のメソッドは、後でclearTimeout()という呼び出しに渡すIDを返します。残念ながら、アクティブタイマーをクリアするための組み込み関数はありません。

すべてのタイマーIDを登録するコードを書きました。 setTimeoutのラッパーコールバックを実装するための単純なTODOタスクはまだオープンしています。機能には問題はありませんが、setTimeoutへの呼び出しが多すぎると配列が混乱する可能性があります。

ホストプロトタイプの公開と内部動作がW3Cの仕様に含まれていないため、ホストオブジェクトのプロトタイプを拡張すると未定義の動作が発生する可能性があることに注意してください。ブラウザはこの将来を変える可能性があります。別の方法は、コードをウィンドウオブジェクトに直接入れることですが、他のスクリプトがこの変更されたメソッドを呼び出すことは絶対に確実ではありません。どちらの決定も最適な選択ではありません。

(function() 
    { // missing in older browsers, e.g. IE<9 
    if(!Array.prototype.indexOf) 
     Object.defineProperty(Array.prototype, 'indexOf', {value: function(needle, fromIndex) 
     { // TODO: assert fromIndex undefined or integer >-1 
     for(var i=fromIndex || 0; i < this.length && id !== window.setTimeout.allIds[i];) i++; 
     return i < this.length ? i : -1; 
     }}); 

    if(!Array.prototype.remove) 
     Object.defineProperty(Array.prototype, 'remove', { value: function(needle) 
     { var i = this.indexOf(needle); 
     return -1 === i ? void(0) : this.splice(i, 1)[0]; 
     }}); 


    // Warning: Extensions to prototypes of host objects like Window can cause errors 
    //   since the expose and behavior of host prototypes are not obligatory in 
    //   W3C specs. 
    //   You can extend a specific window/frame itself, however, other scripts 
    //   could get around when they call window.prototype's methods directly. 
    try 
    { 
     var 
     oldST = setTimeout, 
     oldSI = setInterval, 
     oldCT = clearTimeout, 
     oldCI = clearInterval 
     ; 
     Object.defineProperties(Window.prototype, 
     { 
     // TODO: write a wrapper that removes the ID from the list when callback is executed 
     'setTimeout': 
     { value: function(callback, delay) 
      { 
      return window.setTimeout.allIds[window.setTimeout.allIds.length] 
       = window.setTimeout.oldFunction.call(this, callback, delay); 
      } 
     }, 

     'setInterval': 
     { value: function(callback, interval) 
      { 
      return window.setInterval.allIds[this.setInterval.allIds.length] 
       = window.setInterval.oldFunction.call(this, callback, interval); 
      } 
     }, 

     'clearTimeout': 
     { value: function(id) 
      { debugger; 
      window.clearTimeout.oldFunction.call(this, id); 
      window.setTimeout.allIds.remove(id); 
      } 
     }, 

     'clearInterval': 
     { value: function(id) 
      { 
      window.clearInterval.oldFunction.call(this, id); 
      window.setInterval.allIds.remove(id); 
      } 
     }, 

     'clearTimeoutAll' : { value: function() { while(this.setTimeout .allIds.length) this.clearTimeout (this.setTimeout .allIds[0]); } }, 
     'clearIntervalAll': { value: function() { while(this.setInterval.allIds.length) this.clearInterval(this.setInterval.allIds[0]); } }, 
     'clearAllTimers' : { value: function() { this.clearIntervalAll(); this.clearTimeoutAll(); } } 
     }); 

     window.setTimeout .allIds  = []; 
     window.setInterval .allIds  = []; 
     window.setTimeout .oldFunction = oldST; 
     window.setInterval .oldFunction = oldSI; 
     window.clearTimeout .oldFunction = oldCT; 
     window.clearInterval.oldFunction = oldCI; 
    } 
    catch(e){ console.log('Something went wrong while extending host object Window.prototype.\n', e); } 
    })(); 

これは、各ネイティブメソッドの周りにラッパーメソッドを配置します。メソッドのオブジェクトのFunctionにある配列内のネイティブ関数を呼び出し、返されたIDを追跡します。 TODOを実装することを忘れないでください。