Question

我有下面的代码，我试图通过在添加div标签之间延迟一定的时间来显示一条消息（以DIV的形式），我对Ajax的了解很少，并试图找到一种解决方案，但是我无法使其正常工作。

下面的代码在我尝试执行时不会等待2秒钟，而是连续不断地添加div消息而没有任何延迟。

有人可以引导我吗？

这是我的代码

<script>
       function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function wait_for_some_time() {
            await sleep(2000);
        }

    $(function () {
        $("#btn-chat").click(function (event) {
            event.preventDefault();
            if ($("#mes_resp").val() != "") {
                $("#form-chat").submit();
            }

        });
        $("#form-chat").submit(function (event) {
            event.preventDefault();
            var user_input = $("#mes_resp").val();
            var pre_key = $("#pre_key").val();
            if (user_input != "") {
                $(".media-list").append('<div class="bubble-line"><div class="bubble bubble--alt">' + user_input + '</div></div> <div></div>');

                if ((user_input == "yes" && pre_key == "duration")) {
                    i = 0;

                    while (i < 10) {

                    $(".media-list").append('<br>');
                    $(".media-list").append('<div class="thought"><div class="bubble">' + "Your request is in progress" + '</div></div> <div></div>');
                    $(".panel-body").stop().animate({ scrollTop: $(".panel-body")[0].scrollHeight }, 1000);
                    $("#mes_resp").val('');
                    wait_for_some_time();
                    i++;
                    }
                }

            }
            $("#mes_resp").val('')

        });

    });</script>

Answer 1

尝试将await关键字放在对wait_for_some_time（）函数的调用旁边。

Answer 2

我用setInterval（）替换了它，效果很好，以防万一有人在找

<script>
         function continueExecution() {
                    $(".media-list").append('<br>');
                    $(".media-list").append('<div class="thought"><div class="bubble">' + "Your request is in progress" + '</div></div> <div></div>');
                    $(".panel-body").stop().animate({ scrollTop: $(".panel-body")[0].scrollHeight }, 1000);
                    $("#mes_resp").val('');
        }

    $(function () {
        $("#btn-chat").click(function (event) {
            event.preventDefault();
            if ($("#mes_resp").val() != "") {
                $("#form-chat").submit();
            }

        });
        $("#form-chat").submit(function (event) {
            event.preventDefault();
            var user_input = $("#mes_resp").val();
            var pre_key = $("#pre_key").val();
            if (user_input != "") {
                $(".media-list").append('<div class="bubble-line"><div class="bubble bubble--alt">' + user_input + '</div></div> <div></div>');

                if ((user_input == "yes" && pre_key == "duration")) {
                    var timer;
                    timer = setInterval(function () {
                    i = 0;
                    while (i < 10) {
                        continueExecution();
                        i++;
                        }
                        clearInterval(timer);
                    }, 3000);
                }

            }
            $("#mes_resp").val('')

        });

    });</script>

在Ajax中附加DIV之间的延迟/等待

2 个答案: