Set delay between some echo via AJAX

Question

So I have html form send data via ajax to php like:

index.html

<script type="text/javascript">
    $("#button").click(function(){
        var ajaxname=$("#name").val();
        $.ajax({
            method:"POST",
            url:"some.php",
            data:"name="+ajaxname,
            success:function(data){
                $("#formresult").html(data);
            }
        });
    }
</script>

<form>
    <input type="text" name="name" id="name">
    <input id="button" type="button" value="send"/>
</form>
<div id="formresult"></div>

and php file like:

some.php

<?php

$name = $_POST['name'];

if($name == "mahdi"){
    echo 'true' . '<br/>';
    echo 'welcome' . '<br/>';
    echo 'have good time!' . '<br/>';
}
else{
    echo 'false' . '<br/>';
    echo 'wrong name' . '<br/>';
}

?>

When form submit and AJAX callback success, show all of echo in one moment and together. but I want echo "delay in time" for example 2 sec between any echo.

I used "sleep(2);" in php, "setTimeout" and "for loop" in JavaScript, but no one does not work.

Please anybody know the answer put it in https://jsfiddle.net/ to see it work.

Answer 1

A lot of confusion here. If I understand correctly, you want each of the echos to execute with a 2 second delay between them, resulting in the text of each echo displaying one after another on the page?

If so, you can't use one PHP script with a set of echos like that. You'd need to send back an array of strings and have JavaScript use setInterval to display one at a time.

Edit for example:

PHP would be something like:

<?php
header('Content-Type: application/json');
$name = $_POST['name'];

if($name == "mahdi"){
    echo json_encode(array('true', 'welcome', 'have good time!'));
} else {
    echo json_encode(array('false', 'wrong name'));
}

And JS like:

$("#button").click(function(){
    var ajaxname = $("#name").val();
    $.ajax({
        method: "POST",
        url: "some.php",
        dataType: "json",
        data: "name=" + ajaxname,
        success: function (data) {
            var index = 0;
            var intervalId = setInterval(function () {
                $("#formresult").append('<p>' + data[index] + '</p>');
                index = index + 1;
                if (index === data.length) {
                    clearInterval(intervalId);
                }
            }, 2000);
        }
    });
}

This sets a setInterval after successful AJAX response. After all messages are appended to #formresult, the interval is cleared.

Answer 2

when you use Ajax, the request sent to server and waits to server do the job and return the response.you can not get the result in separated parts.

you have to use Socket to do such things.

Answer 3

To make it delay in PHP do:

<?php
sleep(1);
$name=$_POST['name'];

if($name == "mahdi"){

echo 'true' . '<br/>';

echo 'welcome' . '<br/>';

echo 'have good time!' . '<br/>';
}
else{
echo 'false' . '<br/>';
echo 'wrong name' . '<br/>';
}

?>

But for Javascript use:

<script type="text/javascript">

    $("#button").click(function(){

var ajaxname=$("#name").val();
   $.ajax({
          method:"POST",
          url:"some.php",
          data:"name="+ajaxname,
          success:function(data){setTimeout(function(data){
                          $("#formresult").html(data);

                                }});
                          },2000,data)};
</script>

<form>
<input type="text" name="name" id="name">
<input id="button" type="button" value="send"/>
</form>
 <div id="formresult"></div>

Keep in mind, by using both snippets you will get a total of a 4 second delay.

Answer 4

Please go through this. You can use setTimeout.

https://jsfiddle.net/687qgqz0/?utm_source=website&utm_medium=embed&utm_campaign=687qgqz0

Answer 5

You can return an array from php, iterate returned array with $.each(), use .delay(), .queue(), at success to delay two seconds between each call to .append()

<form>
  <input type="text" name="name" id="name">
  <input id="button" type="button" value="send" />
</form>
<div id="formresult"></div>
<script type="text/javascript">
  var arr = ["true<br/>"
            , "welcome<br/>"
            , "have good time!<br>"
            , "false<br/>"
            , "wrong name<br>"];
  $("#button").click(function() {

    var ajaxname = $("#name").val();
    $.ajax({
      method: "POST",
      url: "/echo/json/",
      data: {
        json: JSON.stringify(arr)
      },
      dataType: "json",
      success: function(data) {
        $.each(data, function(index, html) {
            $("#formresult").delay(2000)
            .queue(function(next) {
              $("#formresult").append(html);
              next()
            })
        })
      }
    });
  })

</script>

jsfiddle https://jsfiddle.net/berhth9r/

Answer 6

use below code

<?php

     $name="mahdi";

     if($name == "mahdi"){

     echo 'true' . '<br/>';
     sleep(2);
     echo 'welcome' . '<br/>';
     sleep(2);
     echo 'have good time!' . '<br/>';
     }
     else{
     echo 'false' . '<br/>';
     echo 'wrong name' . '<br/>';
     }

     ?>