在動態負載上清除 javascript

Question

我有一個用於特殊圖像滾動條的 javascript 插件。 滾動條包含一堆超時方法和許多變量，這些變量的值是從這些超時中設置的。

一切正常，但對於我正在處理的網站，需要動態加載頁面。 問題在於，例如，當我更改網站上的語言時，這是由 jquery 加載 function 表示內容被動態加載到網站上 - 以及圖像 Z10BF08F0BBD6689475BE65B4AE44BD。

現在這是一個大問題。 當我第二次動態加載圖像 slider 時，我以前的所有值以及計時器和其他所有值都保持不變。 有什么方法可以清除 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()方法都返回一個 ID，該 ID 將傳遞給clearTimeout()的后續調用。 不幸的是，沒有內置清除任何活動計時器。

我編寫了一些代碼來注冊所有計時器 ID。 為 setTimeout 實現包裝回調的簡單 TODO 任務尚未開放。 該功能沒有問題，但是對 setTimeout 的過多調用可能會弄亂數組。

請注意，擴展宿主對象的原型可能會導致未定義的行為，因為暴露宿主原型和內部行為不是 W3C 規范的一部分。 瀏覽器可能會改變這個未來。 另一種方法是將代碼直接放入 window object 中，但是，其他腳本是否會調用此修改方法並不確定。 這兩個決定都不是最佳選擇。

  (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。