Как мне сделать задержку в отправке сообщений?

Как мне сделать задержку в отправке сообщений, чтобы после первого через 5 секунд пришло второе сообщение, сначала пробовал через sleep(); но мне сказали то что он задерживает интерпретатор, и сказали делать через ajax, почитав документацию, я так и не понял как решить свою задачу

код:

<?php 
$msg1f = "Привет бро, спасибо что среагировал и написал нам о критической уязвимости, мы пофиксили её, проверь ;)";

?>
<style>
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);

.container {
    width: 400px;
    padding: 10px;
}

.message-blue {
    position: relative;
    margin-left: 20px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #A8DDFD;
    width: 500px;
    height: 65px;
    text-align: left;
    font: 400 .9em 'Open Sans', sans-serif;
    border: 1px solid #97C6E3;
    border-radius: 10px;
}

.message-orange {
    position: relative;
    margin-bottom: 10px;
    margin-left: calc(100% - 240px);
    padding: 10px;
    background-color: #f8e896;
    width: 300px;
    height: 60px;
    text-align: left;
    font: 400 .9em 'Open Sans', sans-serif;
    border: 1px solid #dfd087;
    border-radius: 10px;
}

.message-content {
    padding: 0;
    margin: 0;
}

.message-timestamp-right {
    position: absolute;
    font-size: .85em;
    font-weight: 300;
    bottom: 5px;
    right: 5px;
}

.message-timestamp-left {
    position: absolute;
    font-size: .85em;
    font-weight: 300;
    bottom: 5px;
    left: 5px;
}

.message-blue:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 15px solid #A8DDFD;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    top: 0;
    left: -15px;
}

.message-blue:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 17px solid #97C6E3;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    top: -1px;
    left: -17px;
}

.message-orange:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 15px solid #f8e896;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    bottom: 0;
    right: -15px;
}

.message-orange:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 17px solid #dfd087;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    bottom: -1px;
    right: -17px;
}

</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>ads</title>
</head>
<body>
    <div class="container">
    <div class="message-blue">
        <p class="message-content"><?php print($msg1f);?></p>
    </div>
    <?php sleep(5);
    print('<div class="message-orange">
        <p class="message-content">Ох спасибо бро, поменяю креды а то мало ли xD</p>
    </div>')?>
    </div>
</body>
</html> 

Ответы (0 шт):