Почему мой код всегда передает один и тот же идентификатор (myId) в скрипт php?

Question

Я пытаюсь обработать внутренний обмен сообщениями через ajax, используя интервал для замедления запросов, которые иногда могут исчисляться сотнями. Однако мой код всегда передает одни и те же данные формы, даже если идентификатор автоматически увеличивается с помощью цикла for ().

Вот мой HTML-код:

<form id="form" action="index.php" method="post">
    <input type="hidden" id="users" value="2|5|7|8|20" />
    <div class="form-group">
        <label>Message:</label>
        <textarea name="message" id="msg" class="form-control" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-info">Send Message</button>
</form>

Вот мой jQueryкод:

$("#form").submit(function(e){
    e.preventDefault();
    var str = $('#users').val();
    var message = $('#msg').val();
    var strArr = str.split('|');
    for(i=0; i < strArr.length; i++){
        var myId = strArr[i];
        var formdata = "action=messaging_text&id="+myId+"&message="+message+"";
        var timerId = 0,
        timerId = setInterval(function(){
            $.ajax({
                type: "POST",
                url: 'index.php',
                data: formdata,
                dataType: 'json'
            }).done(function(mydata) {
                $("#status").append("Sent Text Message to <span style=\"color:green\">"+mydata.name+"</span><br>");
                clearInterval(timerId);
            });
        }, 6000);
    }
});

Answer 1

Проверьте этот код и исправьте ваш в соответствии с ним. Взгляните также на html.

$("#sumb_form").click(function(e){
    e.preventDefault();
    $("#status").html('');
    var str = $('#users').val();
    var message = $('#msg').val();
    var strArr = str.split('|'); 
    var sec = 6000; //6 seconds
    
    strArr.forEach((val, ind) => {
       
       var formdata = "action=messaging_text&id="+val+"&message="+message+""; 

      setTimeout(() => {
           /*$.ajax({
                type: "POST",
                url: 'index.php',
                data: formdata,
                dataType: 'json'
            }).done(function(mydata) {
           */
           // $("#status").append("Sent Text Message to <span style=\"color:green\">"+mydata.name+"</span><br>");
              $("#status").append("Sent Text Message to <span style=\"color:green\">"+val+"</span><br>"); // this is for snippet
              console.log(formdata); // this is for snippet
           /*   
            });
          */  
      }, ind * sec)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="status"></div>
<form id="form" action="index.php" method="post">
    <input type="hidden" id="users" value="2|5|7|8|20" />
    <div class="form-group">
        <label>Message:</label>
        <textarea name="message" id="msg" class="form-control" rows="5"></textarea>
    </div>
    <button id="sumb_form" class="btn btn-info">Send Message</button>
</form>