StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Variables are scoped to functions, not if/else/for/while/etc. blocks. Every time you call </p> <pre><code>fragment.appendChild((function() { ... </code></pre> <p>you are creating a new function (new scope). This new function references the <code>i</code> and <code>response</code> variables. So now, <code>i</code> and <code>response</code> are scoped to BOTH the outer function and the new function. </p> <p>That's not enough to leak memory. (<code>i</code> and <code>response</code> are normal variables that will go out-of-scope after the new function is done)</p> <p>BUT, you create a <code>p</code> DOM element in the new function, and reference it in the outer function (you return it to the <code>fragment.appendChild</code> call as an argument). Now think about it: you have the outer scope <code>fragment</code> referencing a <code>p</code> DOM created from the inner scope, which needed to use the <code>i</code> and <code>response</code> variables from the outer scope to create the DOM element in the first place. </p> <p>The <code>fragment</code> and <code>p</code> DOM objects each have a reference to each other. Despite your attempts to zero-out the reference count by nulling the variable pointers, <code>p=null</code> and <code>fragment = null</code> will not get rid of all references. The <code>fragment</code> still has a reference to the inner <code>p</code>, which still has a reference to the outer <code>response</code> variable. The two "scopes" will never be garbage collected because of this remaining circular dependency.</p> <p>Anyone, please correct me if I've made any mistakes.</p> <hr> <p>As for a solution, just don't use an inner function!</p> <pre><code>fragment = document.createDocumentFragment(); for (var i = 0, var e = response.verses.length; i < e; i++) { var p = document.createElement('p'); p.setAttribute('lang', (response.unicode) ? 'ar' : 'en'); p.innerHTML = ((response.unicode) ? (response.surah + ':' + (i+1)).transliterate() : response.surah + ':' + (i+1)) + ' ' + insertTags(response.verses[i], '<a href="#" onclick="window.popup(this);return false;" class="match">', '</a>'); fragment.appendChild(p); } params[0].appendChild( fragment ); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload