undefined array in loop function javascript

Question

i have following script like :

/* jshint loopfunc:true */
var url = [
    "http://protiumdesign.com/wp-content/uploads/2015/04/Material-Design-Background-1024.jpg",
    "http://i.imgur.com/wt4NRqA.jpg",
    "http://i0.wp.com/thezinx.com/wp-content/uploads/md-6.png"
];

$(document).ready(function() {
    changeBack();

    function changeBack() {
        for (var i = 0; i < url.length; i++) {

            $('#elem').fadeTo('slow', 0.3, function() {
                $(this).css('background-image', 'url(' + url[i] + ')');
            }).fadeTo('slow', 1).delay(1000);
        }
        changeBack();
    }
});

the function above for change the background image dynamically but the array is undefined within the function, how to fix that , thank you

this is the fiddle : Here

everything is right, just your loop is wrong for (var i = 0; i < url.length-1; i++) { $('#elem').fadeTo('slow', 0.3, function() { $(this).css('background-image', 'url(' + url[i] + ')'); }).fadeTo('slow', 1).delay(1000); } It should be length-1 rather than length — Brij Raj Singh - MSFT, Jul 28 '15 at 05:01
@BrijRajSingh: no, you should make the `i` parameter bound to the callback function, making the length - 1 will perform 2 "changes" to index 2, like `function(localI) { $(this).css('background-image', 'url(' + url[localI] + ')'); }.bind(this, i)`, see https://jsfiddle.net/Icepickle/9Lqc47dq/9/ — Icepickle, Jul 28 '15 at 05:26

score 4 · Accepted Answer · edited May 23 '17 at 11:43

Although one of the issues described here is a duplicate of JavaScript closure inside loops – simple practical example, there are other issues like infinite recursive call of changeBack.

I think a better approach will be

/* jshint loopfunc:true */
var url = ["http://protiumdesign.com/wp-content/uploads/2015/04/Material-Design-Background-1024.jpg", "http://i.imgur.com/wt4NRqA.jpg", "http://i0.wp.com/thezinx.com/wp-content/uploads/md-6.png"];

$(document).ready(function() {
  var i = 0;

  function changeBack() {
    $('#elem').fadeTo('slow', 0.3, function() {
      $(this).css('background-image', 'url(' + url[i++] + ')');
      i = i < url.length ? i : 0
    }).fadeTo('slow', 1).delay(1000).promise().done(changeBack);
  }
  changeBack();
});

#elem {
  width: 500px;
  height: 300px;
  background-size: 100%;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='elem'></div>

undefined array in loop function javascript

1 Answers1