元素不随jquery ajax接收的数据一起移动

Question

我想用从ajax收到的数据更改icon1和icon2的位置.

"结果"是div元素.通过显示从ajax收到的消息它工作正常,但我想知道为什么"icon1"和"icon2"没有移动.收到消息并且"result"元素每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的success函数中编写代码,以确保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")
    });
}