-2

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 の後にのみ呼び出されるため、意味がありませんか?

4

3 に答える 3

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 を満たします。すべてのポスターからの入力に感謝します。

于 2013-11-10T17:25:27.963 に答える
0

これはどう：

window.onload = function() {  

    $.getJSON('net.json', function(){ 
        console.log('it worked');
    }).done(function(response){
        $.each( response, function( key, val ) {
            jsonObjects.push( val );
        });
    });
}
于 2013-11-09T16:36:39.613 に答える
0

関数では、setupJsonImages次のコードが画像をレイヤーに追加します。

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

このコードでは、i通常、 willの値はjsonObjects.lengthsinceiが関数にスコープさsetupJsonImagesれ、onload が実行されるまでに for ループが終了します。alert ステートメントは、ival を機能させる停止のため、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();
    };
}
于 2013-11-09T16:42:08.867 に答える