ajax - Do while javascript issue - Stack Overflow

admin管理员组

文章数量:1356024

I'm trying to send multiple post within a do while loop but the result is not added

<script type="text/javascript">
function action() {
    var initval = 1;
    var endval = 5;
    do {
    var action_string = 'txtuser=someone';

    $.ajax({
                    type: "POST",
                    url: "http://localhost/js.php",
                    data: action_string,
                    success: function(result){
                       $('div#append_result').append(initval + ',<br/>');
                     }  
                });
    initval++;
     } while (initval <= endval);
  }
</script>

The Output is: 5, 5, 5, 5, 5,

and I need the output to be: 1, 2, 3, 4, 5,

I'm trying to send multiple post within a do while loop but the result is not added

<script type="text/javascript">
function action() {
    var initval = 1;
    var endval = 5;
    do {
    var action_string = 'txtuser=someone';

    $.ajax({
                    type: "POST",
                    url: "http://localhost/js.php",
                    data: action_string,
                    success: function(result){
                       $('div#append_result').append(initval + ',<br/>');
                     }  
                });
    initval++;
     } while (initval <= endval);
  }
</script>

The Output is: 5, 5, 5, 5, 5,

and I need the output to be: 1, 2, 3, 4, 5,

• javascript
• ajax
• while-loop
• do-while

Share Improve this question Follow edited Jun 11, 2014 at 17:10 Saro Taşciyan 5,23655 gold badges3232 silver badges5050 bronze badges asked Aug 5, 2011 at 3:50 blackriderwsblackriderws 85322 gold badges99 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Due to the async nature of AJAX, by the time your success function runs for any of the resulting AJAX requests, the loop has pleted and initval is set to 5. You need to capture the state of initval at the start of each request and use that captured state in the success() method. Closing over the value is the simplest way to do it:

function action() {
    var initval = 1;
    var endval = 5;
    do {
        var action_string = 'txtuser=someone';

        ( function( captured_initval ){
            $.ajax({
                type: "POST",
                url: "http://localhost/js.php",
                data: action_string,
                success: function(result){
                    $('div#append_result').append(captured_initval + ',<br/>');
                }  
            });
        }( initval ) );

        initval++;
    } while (initval <= endval);
}

Understand, though, that one or more requests could get hung up at the server allowing a latter request to plete first, which could result in 1, 2, 5, 3, 4 or something like that.

Also, using an element's ID is much faster than prefixing the hash selector with the elements tag name. Plus you should avoid re-querying the DOM for your result DIV every time the success runs. Grab it once and use it when needed:

function action() {
    var initval = 1;
    var endval = 5;
    do {
        var action_string = 'txtuser=someone',
            $AppendResult = $('#append_result');

        ( function( captured_initval ){
            $.ajax({
                type: "POST",
                url: "http://localhost/js.php",
                data: action_string,
                success: function(result){
                    $AppendResult.append(captured_initval + ',<br/>');
                }  
            });
        }( initval ) );

        initval++;
    } while (initval <= endval);
}

The Ajax request is asynchronous, which means by the time the success handler returns, the loop is already pleted. Instead, you can create a closure to preserve the value:

success: (function(i){
    return function() {
         $('div#append_result').append(i + ',<br/>');
    }
})(initval)

This is because of the async behavior of ajax: Here is a modified version:

var initval = 1;
var endval = 5;
function action(){
    var action_string = 'txtuser=someone';
    $.ajax({
        type: "POST",
        url: "http://localhost/js.php",
        data: action_string,
        success: function(result){
           $('div#append_result').append(initval + ',<br/>');
           initval++;
           if(initval<=endval)
            action();
        }  
    });
 }

This is now somewhat a sequential approach. Note: I assumed every ajax request returns success, if there is an error, you should handle them on the error callback.

本文标签： ajaxDo while javascript issueStack Overflow