Question

您好我正在尝试为图像编写代码，以便每秒更改一次，具体取决于存储在数组中的内容。这是我到目前为止所拥有的：

function parse_input(){
    //initializes the input_text and the text_array variables
    var input_text=document.getElementById('input_text').value;
    var text_array=[];
    //loops through input_text and if it is an alphanumeric character...pushes it to the text_array
    for(var letter in input_text){
        const LETTER_REGEX=/^[a-zA-Z0-9]+$/;

        if(LETTER_REGEX.test(input_text[letter])){
            text_array.push(input_text[letter]);
        }
    }
    //function to change the image
    function change_image(array){
            document.getElementById('letter_image').src="images/"+array+".png";
            document.getElementById('letter_image').alt=array;
    }
    //supposed to loop through the text_array and change the image every second.
    for(var i=0;i<text_array.length;i++){
        setTimeout(function(){change_image(text_array[i])},1000*i);
    }
}


window.onload=function(){
    document.getElementById('finger_spell_it').onclick=function(){
        parse_input();
    }
}

当我去运行测试时，我得到一个未定义的变量。我不知道我做错了什么，请帮忙。

Answer 1

当setTimeout运行时，i已经处于未定义的索引。

您需要为它创建一个范围：

// ...

for(var i=0;i<text_array.length;i++){
    (function(index){
        setTimeout(function(){
            change_image(text_array[index])
        }, 1000 * index);
    })(i);
}

// ...

Answer 2

您需要closure。这是精心解释的here：

这是一个关闭。函数不必为了返回而返回叫封闭。只需访问您眼前的变量即可词法范围创造了一个闭包。
function foo(x) {
  var tmp = 3;
  return function (y) {
    alert(x + y + (++tmp));
  }
}
var bar = foo(2); // bar is now a closure.
bar(10);
上面的功能也会提醒16，因为bar仍然可以参考 x和tmp，即使它不再直接在范围内。

代码示例：

for(var i=0;i<text_array.length;i++){
    (function(index){
        setTimeout(function(){
            change_image(text_array[index])
        }, 1000 * index);
    })(i);
}

也可以使用第三方收费箱（如jQuery proxy：

）创建

闭包

for(var i=0;i<text_array.length;i++){
    setTimeout($.proxy(function(index){
            change_image(text_array[index])
        }, this, i)
    , 1000*i);
}

或使用underscore.js bind

for(var i=0;i<text_array.length;i++){
    setTimeout(_.bind(function(index){
            change_image(text_array[index])
        }, this, i)
    , 1000*i);
}

将数组值作为函数参数传递

2 个答案: