jQuery forループのトラブルに対するsetInterval

Question

私はx秒ごとに特定のforループを実行しようとしていますが、 `setInterval work 'を作ることはできません。私の構文が間違っていると確信していますが、私はそれを正しいものにすることはできません。

私は以下の私の完全なコード追加しました：

のjQueryを：

//Click saves this.id as userID 
$(function() { 
    var rTitle, rText, qTitle, qText, numRows, userID; 
    $("#buttons").find(".btn").click(function() { 
    $(this).parent().toggleClass('fullscreen'); 
    $(this).parent().siblings().toggleClass('master'); 
    var userID = this.id; 

    //userID is then used for ajax to PHP script, information passed back is put in variables and generateProblems function is run 
    $.ajax({ 
     type: "POST", 
     url: 'include/responseget.php', 
     dataType: 'json', 
     data: { 
     userID: userID 
     }, 
     success: function(json) { 
     rTitle = json.rTitle; 
     rText = json.rText; 
     qTitle = json.qTitle; 
     qText = json.qText; 
     next = json.next; 
     numRows = json.numRows; 
     id = json.id; 
     generateProblems(); 
     } 
    }); 

    }); 
    //Generate draggable html with an interval of 1000 
    function generateProblems() { 
    $('<div>' + qTitle + '</div>').data('number', qTitle).attr('id', 'question').attr('class', 'bold').appendTo($("#" + id).parent()).hide().fadeIn(2000); 
    for (var i = 0; i < numRows; i++) { 
     setInterval(function() { 
     $('<div>' + rTitle[i] + '</div>').data('number', next[i]).attr('id', +next[i]).appendTo($("#" + id).parent()).draggable({ 
      containment: '.site-wrapper', 
      stack: '#testpile div', 
      cursor: 'move', 
      revert: true 
     }).hide().fadeIn(2000) 
     $('<div>' + rText[i] + '</div>').data('number', next[i]).attr('id', +next[i]).appendTo($("#" + id).parent()).hide().fadeIn(2000); 
     }, 1000); 
    } 

    //Rest of the code is not important, but I put it in nonetheless. 
    $('#testdrop').droppable({ 
     drop: handleDropEvent, 
     accept: '#testpile div' 
    }); 

    function handleDropEvent(event, ui) { 
     var problemNumber = ui.draggable.data('number'); 
     ui.draggable.draggable('disable'); 
     ui.draggable.draggable('option', 'revert', false); 
     $("#testpile").children().hide(); 

     $.ajax({ 
     type: "POST", 
     url: 'include/responseget.php', 
     dataType: 'json', 
     data: { 
      userID: problemNumber 
     }, 
     success: function(json) { 
      rTitle = json.rTitle; 
      rText = json.rText; 
      qTitle = json.qTitle; 
      qText = json.qText; 
      next = json.next; 
      numRows = json.numRows; 
      generateProblems(); 
     } 
     }); 

    } 
    } 
}); 

PHP：

<?php include 'login.php'; 
    if(isset($_POST['userID'])){ 
     $id = $_POST['userID']; 
     $stmt = $conn->prepare("SELECT DISTINCT AnswerTitle, AnswerText, QuestionTitle, QuestionText, Next FROM question_answers 
     INNER JOIN question 
     ON question_answers.QuestionID=question.QuestionID 
     INNER JOIN answer 
     ON question_answers.AnswerID=answer.AnswerID 
     WHERE AnswerGroup = ?;"); 
     $stmt->bind_param('s', $id); 
     $stmt->execute(); 
     $result = $stmt->get_result(); 

      while($row = $result->fetch_assoc()) 
      { 
       $rTitle_array[] = $row['AnswerTitle']; 
       $rText_array[] = $row['AnswerText']; 
       $qTitle = $row['QuestionTitle']; 
       $qText = $row['QuestionText']; 
       $next_array[] = $row['Next']; 
       $numRows = ($result->num_rows); 
      } 

     $response = array(
      'rTitle' => $rTitle_array, 
      'rText' => $rText_array, 
      'qTitle' => $qTitle, 
      'qText' => $qText, 
      'next' => $next_array, 
      'numRows' => $numRows, 
      'id' => $id 
     ); 

     echo json_encode($response); 
    } 

    // close connection 
    mysqli_close($conn); 
?> 

Answer 1

あなたがこれを取得しようとしているようですが、が聞こえます毎秒1行追加する効果。あなたは再帰を使うことができます。

また、setIntervalは多数の呼び出し用です。 setTimeoutは単一コール用です。

function generateProblems(i) 
{ 
    // if we're at the end then stop 
    if(i == numRows) return; 

    // wait 1000 
    setTimeout(function() 
    { 
     // do what you want with i here 

     // call the next iteration 
     generateProblems(i + 1); 
    }, 1000); 
} 

// then you kick it off with the 0 index 
generateProblems(0); 

それとも、最初の繰り返しはすぐにキックオフしたい場合：

function generateProblems() 
{ 
    // if we're at the end then stop 
    if(i == numRows) return; 

    // do what you want with i here 

    // move to next row 
    ++i; 
    setTimeout(generateProblems, 1000); 
} 

// global var to keep track of where we are 
i = 0; 
generateProblems