jQuery $ .getScript（）腳本積累？

我從MySQL（通過php）替換了'div'中div的html內容，有時但並非總是從MySQL插入該內容所需的任何javascript，使用$.getScript()。

這一切正常。當用戶點擊next page時，它會從MySQL獲取新的html和javascript，但經過許多頁面之後，它累積了許多腳本，這對我來說似乎是一個糟糕的主意，因爲我不希望腳本不再需要浮動。如果用戶點擊'上一頁'按鈕，它們可以重新加載（然後會發生什麼 - 同一腳本的多個實例？）。

這些腳本獲取音頻內容（ion.sound）和數據數組〜100個元素。似乎沒有辦法刪除這些腳本並釋放內存。

我很擔心最終的性能問題。或者這是完全錯誤的做法嗎？

任何幫助表示讚賞。

來源

2017-05-31 DumbBunny

我認爲這並不容易，但這個問題似乎給了一些很好的建議（雖然它不使用getScript選項）https://stackoverflow.com/questions/4365062/how-to-卸載-A-JavaScript的從-AN-HTML – Icepickle

這可能不適用於getScript功能。原因是通常情況下，項目在加載後會被添加到全局名稱空間中。目前已經有很好的討論question

根據這些建議，您可以加載您的腳本，並將差異保存在全局名稱空間中，並且在刪除腳本時，只需從全局名稱空間中再次刪除這些對象即可。

這裏的示例在單擊按鈕時加載jQuery，然後檢查對全局窗口對象所做的更改，並在刪除後再次從窗口對象中刪除這些項目。

const jQueryId = "#jQuery-loaded-js-id"; 
 

 
function addJQuery(cb) { 
 
    if (document.querySelector(jQueryId)) { 
 
    console.info('JQuery already loaded'); 
 
    return; 
 
    } 
 
    var scriptElem = document.createElement('script'); 
 
    scriptElem.id = jQueryId.substr(1); 
 
    scriptElem.addEventListener('load', function(windowKeys, e) { 
 
    console.log('jQuery loaded'); 
 
    // get the difference of keys between before load and after load 
 
    // this will only work if no other scripts were loaded in between 
 
    // which would mean, scripts should only be loaded one at the time 
 
    var newKeys = Object.keys(window); 
 
    var diff = newKeys.reduce((set, item) => { 
 
     if (windowKeys.indexOf(item) === -1) { 
 
     set.push(item); 
 
     } 
 
     return set; 
 
    }, []); 
 
    scriptElem.dataset.globalKeys = diff; 
 
    }.bind(this, Object.keys(window))); 
 
    scriptElem.src = 'https://code.jquery.com/jquery-2.2.4.min.js'; 
 
    document.body.appendChild(scriptElem); 
 
} 
 

 
function isJQueryAvailable() { 
 
    // checks if jQuery exists 
 
    alert(!!(window.jQuery || window.$)); 
 
} 
 

 
function removeJQuery() { 
 
    var elem; 
 
    if (!(elem = document.querySelector(jQueryId))) { 
 
    console.info('not available'); 
 
    return; 
 
    } 
 
    document.body.removeChild(elem); 
 
    // removes any of the global keys added to the DOM 
 
    var keys = elem.dataset.globalKeys.split(','); 
 
    for (let i = 0; i < keys.length; i++) { 
 
    delete window[keys[i]]; 
 
    } 
 
    console.info('JQuery removed'); 
 
}

<button type="button" onclick="addJQuery()">Get JQuery</button> 
 
<button type="button" onclick="isJQueryAvailable()">Does JQuery Exist?</button> 
 
<button type="button" onclick="removeJQuery()">Remove JQuery</button>

的例子真的不應該是你所需要的工具，因爲它過於簡單化會發生什麼，當一個腳本加載。可能您需要考慮更基於模塊的方法，其中您加載的腳本有自己的方式來處理。我只是給你一個潛在的方法的例子

來源

2017-05-31 07:56:59 Icepickle

看來，腳本不會在調用$ .getScript（）時掛起，因爲它加載腳本然後執行它。我提供了一個簡單的機制來計算腳本，並且每頁的數量都不相同，但沒有積累 - 我想。無論如何，我會犯錯。

來源

2017-06-02 04:13:31 DumbBunny

jQuery $ .getScript（）腳本積累？

回答

相關問題