Question

遇到JavaScript问题时，无法弄清楚代码在onload函数之后包含警报时的工作原理，以及为什么在删除警报时它不起作用。

var jsonObjects = [];
var imagesObj = {};
var kinImages = [];
var stage;
var layer = new Kinetic.Layer();

window.onload = function () {
    var jsonloaded;
    $.getJSON('net.json', function (response) {
        jsonloaded = response;
        $.each(jsonloaded, function (key, val) {
            jsonObjects.push(val);
        });
        setupJsonImages();
    });
}

function setupJsonImages() {
    stage = new Kinetic.Stage({
        container: 'container',
        width: 1000,
        height: 800
    });

    for (var i = 0; i < jsonObjects.length; i++) {
        var objName = jsonObjects[i].name;
        imagesObj[objName] = new Image();
        kinImages[i] = new Kinetic.Image({
            image: imagesObj[objName],
            x: jsonObjects[i].x,
            y: jsonObjects[i].y,
            name: jsonObjects[i].name,
            width: 0,
            height: 0,
            draggable: true
        });
        imagesObj[objName].src = jsonObjects[i].img;
        imagesObj[objName].onload = function () {
            layer.add(kinImages[i]);
            layer.draw();
        }
        // if this alert is removed, the code breaks
        alert("imagesobj src");
        kinImages[i].on('dragend', function () {
            $.ajax({
                type: "POST",
                url: 'receiver.php',
                contentType: 'application/json; charset=utf-8',
                async: false,
                data: JSON.stringify({
                    objectname: (this).getName(),
                    xcoord: (this).getPosition().x,
                    ycoord: (this).getPosition().y
                })
            });
        });
    }
    stage.add(layer);
    stage.draw();
}

已阅读有关Ajax和异步代码的内容，并且警报会产生延迟，但这是没有意义的，因为ajax代码仅在dragend之后调用？

Answer 1

重写并得到了我追求的结果。到目前为止工作得相当好:-)

var jsonObjects = [];
var imagesObj = {};
var kinImages = [];
var stage;
var layer = new Kinetic.Layer();

window.onload = function() {

  $.getJSON('net.json', function(response){
    $.each( response, function( key, val ) {
      jsonObjects.push( val );
    });
    createStage();
  });
}

function createStage() {

  stage = new Kinetic.Stage({
    container: 'container',
    width: 1000,
    height: 800
  });
  setupJsonImages(-1);
}

function setupJsonImages(index) {

  index++;
  var objName = jsonObjects[index].name;
  imagesObj[objName] = new Image();
  imagesObj[objName].src = jsonObjects[index].img;

  imagesObj[objName].onload = function() {

    setupKinetic(index, imagesObj[objName]);
  }
}

function setupKinetic(index, theImage) {

  kinImages[index] = new Kinetic.Image({
    image: theImage,
    x: jsonObjects[index].x,    // 0,
    y: jsonObjects[index].y,   //0
    name: jsonObjects[index].name,
    width: 0,
    height: 0,
    draggable: true
  });

  layer.add(kinImages[index]);
  layer.draw();

  kinImages[index].on('dragend',function() {

    $.ajax({
      type: "POST",
      url: 'receiver.php',
      contentType: 'application/json; charset=utf-8',
      async: true,
      data: JSON.stringify({ 
        objectname:(this).getName(), 
        xcoord: (this).getPosition().x, 
        ycoord : (this).getPosition().y 
      })
    });
  });

  if(index < jsonObjects.length -1) {
    setupJsonImages(index);
  }
  else {
    finishStage();
  }
}

function finishStage() {

  stage.add(layer);
  stage.draw();
}

可能不是代码最优雅的解决方案，但它可以工作并满足需求atm。感谢所有海报的输入。

Answer 2

这个怎么样：

window.onload = function() {  

    $.getJSON('net.json', function(){ 
        console.log('it worked');
    }).done(function(response){
        $.each( response, function( key, val ) {
            jsonObjects.push( val );
        });
    });
}

Answer 3

在setupJsonImages函数中，此代码将图像添加到图层：

imagesObj[objName].onload = function() {
  layer.add(kinImages[i]);
  layer.draw();
}

在此代码中，i的值通常为jsonObjects.length，因为i的范围限定为setupJsonImages函数，并且onload执行for循环时已完成。警告语句将i val固定为当前值，因为停止使其起作用。

尝试用以下方法替换你的for循环：

for( var i=0; i<jsonObjects.length; i++) {
    var objName = jsonObjects[i].name;
    imagesObj[objName] = new Image();
    imagesObj[objName].src = jsonObjects[i].img;
    // hook up the data we need in the onload event
    var $imgObj = $(imagesObj[objName]);
    $imgObj.data({
        x: jsonObjects[i].x,
        y: jsonObjects[i].y,
        name: jsonObjects[i].name
    });
    imagesObj[objName].onload = function() {
        var $this = $(this);
        var kinImg = new Kinetic.Image({
            image: this, // this = the loaded image
            x: $this.data('x'),
            y: $this.data('y'),
            name: $this.data('name'),
            width: 0,
            height: 0,
            draggable: true
        });

        kinImg.on('dragend',function() {
            $.ajax({
                type: "POST",
                url: 'receiver.php',
                contentType: 'application/json; charset=utf-8',
                async: false,
                data: JSON.stringify({ objectname:(this).getName(), xcoord: (this).getPosition().x, ycoord : (this).getPosition().y })
            });
        });
        kinImages.push(kinImg);
        layer.add(kinImages);
        layer.draw();
    };
}

JavaScript没有警报而中断

3 个答案: