Question

我有多个画布元素：

<canvas class="screen" width="250" height="250" data-json="{{json_encode($board)}}"></canvas>

在我的javascript中，我执行以下操作：

var canvas = document.getElementsByClassName('screen');
for (var i = 0; i < canvas.length; i++) {
    var podium = new Image();
    podium.canvas = canvas[i];
    podium.onload = function() {
        var coordinates = JSON.parse(podium.canvas.getAttribute('data-json');
        console.log(coordinates);
        //Later on I add more images or anything else based on coordinates.
    }
    podium.src = 'my_podium_image.jpg';

}

但coordinates始终包含HTML中最后一个<canvas>元素的数据。

但是，如果我将var coordinates = JSON.parse(podium.canvas.getAttribute('data-json');放在onload之外并打印输出，它会打印每个canvas的data-json属性，这是正确的，但在load()函数中它仍然只记录最后一个画布的数据属性。（多次，因为for循环）

我不知道会发生什么。：）

Answer 1

你的问题是关于Javascript Clousure How do JavaScript closures work?

执行该函数时，podium的值是最后一个已分配的值。

您应该使用保留podium

范围的自动执行功能

var canvas = document.getElementsByClassName('screen');
for (var i = 0; i < canvas.length; i++) {
    (function(podium) {
        podium.canvas = canvas[i];
        podium.onload = function() {
            var coordinates = JSON.parse(podium.canvas.getAttribute('data-json'));
            console.log(coordinates);
            //Later on I add more images or anything else based on coordinates.
        }
        podium.src = 'my_podium_image.jpg';
    })(new Image())

}

Answer 2

var canvas = document.getElementsByClassName('screen');

for (var i = 0; i < canvas.length; i++) {
  (function(index) {
    var podium = new Image();
    podium.canvas = canvas[i];
    podium.onload = function() {
    var coordinates = JSON.parse(podium.canvas.getAttribute('data-json');
    console.log(coordinates);

    //Later on I add more images or anything else based on coordinates.
    podium.src = 'my_podium_image.jpg';
  }(i));
}

Answer 3

那是因为“onload”事件在被触发时是异步的，你的循环已经到了结尾

将for循环中的元素添加到画布中

3 个答案: