[英]Passing array values as function parameter
Hi I am trying to write code for an image to change every second depending on what is stored in an array. 嗨,我正在尝试为图像编写代码,以每秒更改一次,具体取决于存储在数组中的内容。 Heres what I have so far:
这是我到目前为止的内容:
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();
}
}
When I go to run the test I get an undefined variable. 当我去运行测试时,我得到一个未定义的变量。 I don't know what I am doing wrong please help.
我不知道我在做什么错,请帮忙。
When your setTimeout
runs, i
is already at an undefined index. 当您的
setTimeout
运行时, i
已经处于未定义的索引中。
You need to create a scope for it: 您需要为其创建一个范围:
// ...
for(var i=0;i<text_array.length;i++){
(function(index){
setTimeout(function(){
change_image(text_array[index])
}, 1000 * index);
})(i);
}
// ...
You need closure
. 您需要
closure
。 This is elaborately explained here : 这在这里进行了详细说明:
That is a closure.
那是一个封闭。 A function doesn't have to return in order to be called a closure.
一个函数不必为了被称为闭包而返回。 Simply accessing variables outside of your immediate lexical scope creates a closure.
仅访问直接词法范围之外的变量即可创建闭包。
function foo(x) { var tmp = 3; return function (y) { alert(x + y + (++tmp)); } } var bar = foo(2); // bar is now a closure. bar(10);
The above function will also alert 16, because bar can still refer to x and tmp, even though it is no longer directly inside the scope.
上面的函数也会发出警报16,因为bar仍然可以引用x和tmp,即使它不再直接位于范围内。
for your code example: 对于您的代码示例:
for(var i=0;i<text_array.length;i++){
(function(index){
setTimeout(function(){
change_image(text_array[index])
}, 1000 * index);
})(i);
}
closure can also be created using thirdparty tollboxes like jQuery proxy : 也可以使用第三方收费箱(如jQuery proxy)创建封包:
for(var i=0;i<text_array.length;i++){
setTimeout($.proxy(function(index){
change_image(text_array[index])
}, this, i)
, 1000*i);
}
or using underscore.js bind 或使用underscore.js 绑定
for(var i=0;i<text_array.length;i++){
setTimeout(_.bind(function(index){
change_image(text_array[index])
}, this, i)
, 1000*i);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.