setInterval für jQuery für Loop-Problem

Question

Ich versuche, eine bestimmte for-Schleife alle x Sekunden auszuführen, aber kann nicht scheinen, SetInterval arbeiten. Ich bin mir sicher, dass meine Syntax falsch ist, aber ich kann es nicht richtig verstehen.

Ich habe meine volle Code unten hinzugefügt:

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

Es klingt wie Sie versuchen, diese zu erhalten Effekt des Hinzufügens einer Zeile pro Sekunde. Sie könnten Rekursion verwenden.

Auch ist setInterval für zahlreiche Anrufe. setTimeout ist für einen einzelnen Anruf.

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); 

Oder wenn Sie die erste Iteration wollen sofort kick off:

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