Home > Web Front-end > JS Tutorial > body text

How to Access an Outside Variable within a JavaScript Closure Loop?

Mary-Kate Olsen
Release: 2024-10-20 08:56:02
Original
336 people have browsed it

How to Access an Outside Variable within a JavaScript Closure Loop?

Accessing Outside Variable in Loop from JavaScript Closure

In JavaScript, when iterating over an array using a for-loop, it's common to encounter an issue where the value of a variable inside the loop is always the same as the last iteration. This arises due to variable scope and closures.

To resolve this issue, a technique called closures can be employed. A closure is a function that returns a function, which captures the variable scope of the parent function.

Consider the following example:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>
Copy after login

In this code, the variable item changes with each iteration of the loop. When the click handler is invoked, it uses the last value of item.

To solve this, we can use a closure to capture the scope of the loop variable:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(
        // create an anonymous function that will scope "item"
        (function(item) {
            // that returns our function
            return function() {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item) // immediately call it with "item"
    );
}</code>
Copy after login

Here, we wrap the click handler function in another function that captures the scope of item during the loop iteration. When the click handler is invoked, it uses the correct value of item.

An alternative approach is to use jQuery's $.each() function, which automatically scoops the loop variable, eliminating the need for a closure:

<code class="javascript">$.each(this.items, function(i, item) {
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"><img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>
Copy after login

The above is the detailed content of How to Access an Outside Variable within a JavaScript Closure Loop?. For more information, please follow other related articles on the PHP Chinese website!

source:php
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!