Question

我有以下脚本：

/* 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();
    }
});

上面的函数用于动态更改背景图像但是数组在函数内是未定义的，如何解决，谢谢

这是小提琴：Here

Answer 1

虽然此处描述的问题之一与JavaScript closure inside loops – simple practical example重复，但还存在其他问题，例如changeBack的无限递归调用。

我认为更好的方法是

＆＃13;

/* 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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

循环函数javascript中的undefined数组

1 个答案: