gpt4 book ai didi

Javascript:for循环中定义的每个事件处理程序都是相同的,使用最后一次迭代的值

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:19:15 29 4
gpt4 key购买 nike

我无法理解 Javascript 中的范围规则。

在下面的示例中,我假设作用域 url 变量在 for 循环中是私有(private)的。并且 onload-event 函数会看到这个私有(private)实例。

但事情似乎并非如此 - 警报会弹出两次带有最后一个 url 的信息。

如果有人能澄清发生了什么,我将不胜感激。

<html>
<head>
</head>
<body>
<script type="text/javascript">
var testArray = ["http://g0.gstatic.com/images/icons/onebox/weather_rain-40.png", "http://g0.gstatic.com/images/icons/onebox/weather_scatteredshowers-40.png"];
for (var i=0;i<testArray.length;i++){
var img = new Image();
var url = testArray[i];
img.onload = function(){
alert(url);
}
img.src = url;
}
</script>
</body>
</html>

最佳答案

JavaScript 有 block 作用域。

创建新变量范围的唯一方法是在函数中。

var testArray = ["http://g0.gstatic.com/images/icons/onebox/weather_rain-40.png", "http://g0.gstatic.com/images/icons/onebox/weather_scatteredshowers-40.png"];

function createImg( url ) {
var img = new Image();

img.onload = function(){
alert(url);
}
img.src = url;
return img;
}
for (var i=0;i<testArray.length;i++){
var img = createImg(testArray[i]);
}

testArray[i] 传递给创建并返回新图像的函数,确保 onload 处理程序中引用的 url 将是函数范围内的那个。


编辑:

最终,如果您只需要访问 url,就永远不会这样做。

您只需通过 this 从元素的属性中获取它。

function onloadHandler(){
alert( this.src ); // <--- get the url from the .src property!
}

var testArray = ["http://g0.gstatic.com/images/icons/onebox/weather_rain-40.png", "http://g0.gstatic.com/images/icons/onebox/weather_scatteredshowers-40.png"];
for (var i=0;i<testArray.length;i++){
var img = new Image();
var url = testArray[i];
img.onload = onloadHandler;
img.src = url;
}

这样您就不会在循环中创建相同的处理函数实例,而是共享同一个实例,并通过 this 引用接收事件的元素。

关于Javascript:for循环中定义的每个事件处理程序都是相同的,使用最后一次迭代的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6163720/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com