比脚本函数晚于运行的 Ajax 操作

Question

我正在构建一个django项目，这是一个网站将表单发送到服务器，服务器使用表单刚刚注册的查询集和消息字符串“创建新事件成功”进行响应。这是它的代码：是另一个javascript函数，它将服务器刚刚收到的查询集显示为“侧边栏”div。之后，by 将消息追加到结果上方。listeventdocument.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." );脚本function makeEvent(event){            event.preventDefault();            var year = event.target.childNodes[3].children[0].value.slice(0,4);            var month = event.target.childNodes[3].children[0].value.slice(5,7);            var day = event.target.childNodes[3].children[0].value.slice(8,10);            var form = $("#makeEventForm");            $.ajax({                type: form.attr('method'),                url: form.attr('action'),                data: form.serialize(),                success: function(response){                    console.log(response);                                       listevent(year, month, day);                    document.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." );                },                error: function(request,status,error){                    if (request.status == 599) {                        listevent(year, month, day);                        document.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Error : time overlaps with another event" );                    } else {                        alert("code:"+request.status+"\n"+"message:"+status+"\n"+"error:"+error);                    }                },            });        }问题是，当这个函数运行并且ajax操作成功完成时，成功函数（）的第二行似乎比第三行晚运行。因此，不会显示“成功创建新事件”，因为函数会覆盖 div 中的所有内容。makeEventlistevent(year, month, day);listeventsidebar所以我尝试在第三行上使用，但似乎一直都不起作用。如果我将时间值设置得足够大，它就会起作用，但它看起来很糟糕。setTimeout所以，我的问题是：1.成功函数的第二行看起来比第三行晚运行，对吗？2. 如果是这样，到第三线运行后第二行结束运行，我该怎么办？

Answer 1

这是显而易见的，因为内部您正在调用Async AJAX，因此它将并行运行，并且显然将比脚本响应晚于脚本响应，因此脚本将首先执行，然后ajax响应将出现并生效。listevent()

要修复，您可以使用的是ajax方法。这将强制脚本等待 ajax 返回响应。但这不是一个好的做法。async:false

function listevent(year, month, day){

        $.ajax({

            type: "POST",

            url: "{% url 'listevent' %}",

            async:false, // added

            data: {'year':year, 'month':month, 'day':day, 'csrfmiddlewaretoken': '{{ csrf_token }}'},

            dataType: "json",

            success: function(response){

                $("#sidebar").attr('year', year);

                $("#sidebar").attr('month', month);

                $("#sidebar").attr('day', day);

                events = JSON.parse(response.events)

                var str = "<h4>"+year+"/"+month+"/"+day+"</h4><br>"

                if(events.length > 0){

                     events.forEach(event => str += (event['fields']['start_time']+" - "+event['fields']['title']+"<br>"));

                } else {

                    str += "No events currently."

                }

                $("#sidebar").html(str);

                var btn = $("<button></button>").html("New event");

                btn.click(function(){

                    makeEventClick(day);

                });

                $("#sidebar").append(btn);

            },

            error: function(request,status,error){

                   console.log(error);

            },

        });

    }

因此，作为一种良好做法，您可以将下一行移动到 .listevent()

function listevent(year, month, day){

        $.ajax({

            type: "POST",

            url: "{% url 'listevent' %}",

            data: {'year':year, 'month':month, 'day':day, 'csrfmiddlewaretoken': '{{ csrf_token }}'},

            dataType: "json",

            success: function(response){

                $("#sidebar").attr('year', year);

                $("#sidebar").attr('month', month);

                $("#sidebar").attr('day', day);

                events = JSON.parse(response.events)

                var str = "<h4>"+year+"/"+month+"/"+day+"</h4><br>"

                if(events.length > 0){

                     events.forEach(event => str += (event['fields']['start_time']+" - "+event['fields']['title']+"<br>"));

                } else {

                    str += "No events currently."

                }

                $("#sidebar").html(str);

                var btn = $("<button></button>").html("New event");

                btn.click(function(){

                    makeEventClick(day);

                });

                $("#sidebar").append(btn);

                document.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." ); // Added

            },

            error: function(request,status,error){

                   console.log(error);

            },

        });

    }

Answer 2

似乎是 AJAX 异步工作的情况。 已成功运行，但由于它的 AJAX 操作，代码不会等到收到响应，这是成功/失败回调的剩余部分。listevent

调用和AJAX调用开始，而不是等待它完成，它移动到下一行，即listeventdocument.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." );

因此，我的建议是在成功回调结束时移动此 n 侧。listevent