javascript - 元素不随 jquery ajax 接收到的数据移动

Question

我想用从 ajax 接收到的数据改变 icon1 和 icon2 的位置。

“结果”是 div 元素。通过显示从 ajax 收到的消息，它工作正常，但我想知道为什么“icon1”和“icon2”没有移动。确实收到消息并且“结果”元素每 0.5 秒更改一次并向我显示结果。奇怪？!

我尝试在 chrome 上执行以下代码，但它不起作用。我应该对我的代码做什么。我还没有在其他浏览器上尝试过，如果 chrome 旁边的浏览器可以工作，请告诉我。谢谢。

setInterval(function(){

    // post data
    $.ajax({
        type: "POST",
        url: "http://localhost:8080",
        data: {id:mId,color:mColor,x:mX,y:mY}
    }).done(function(msg){

        // result is div element
        result.text(JSON.stringify(msg) );          


    }).fail(function(jqXHR, textStatus) {
        result.text( "Request failed: " + textStatus );
    });

    var jObj = jQuery.parseJSON( result.text() );               

    // icon1 and icon2 is div element
    icon1.css({
        position:"absolute",top:(jObj[0].y),left:(jObj[0].x)
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y),left:(jObj[1].x)
    });

}, 500);

Answer 1

ajax 是异步的!!!你应该始终在 ajax 的成功函数中编写你的代码，以确保 ajax 已返回所需的值..试试这个

setInterval(function(){

// post data
$.ajax({
    type: "POST",
    url: "http://localhost:8080",
    data: {id:mId,color:mColor,x:mX,y:mY}
}).done(function(msg){

    // result is div element
    result.text(JSON.stringify(msg) );          
     var jObj = jQuery.parseJSON( result.text() );               

    // icon1 and icon2 is div element
    icon1.css({
       position:"absolute",top:(jObj[0].y),left:(jObj[0].x)
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y),left:(jObj[1].x)
    });

}).fail(function(jqXHR, textStatus) {
    result.text( "Request failed: " + textStatus );
});

}, 500);

或者让它更干净一点......(并在回答后进行编辑)

setInterval(function(){

// post data
$.ajax({
    type: "POST",
    url: "http://localhost:8080",
    data: {id:mId,color:mColor,x:mX,y:mY}
}).done(function(msg){

    // result is div element
    result.text(JSON.stringify(msg) );          

    changeCss();

}).fail(function(jqXHR, textStatus) {
    result.text( "Request failed: " + textStatus );
    changeCss();
});

}, 500);

function changeCss(){
     var jObj = jQuery.parseJSON( result.text() );
     icon1.css({
       position:"absolute",top:(jObj[0].y+"px"),left:(jObj[0].x+"px")
    }); 
    icon2.css({                         
        position:"absolute",top:(jObj[1].y+"px"),left:(jObj[1].x+"px")
    });
}