2 回答

TA貢獻1860條經驗 獲得超8個贊
這是顯而易見的,因為內部您正在調用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);
},
});
}

TA貢獻1836條經驗 獲得超4個贊
似乎是 AJAX 異步工作的情況。 已成功運行,但由于它的 AJAX 操作,代碼不會等到收到響應,這是成功/失敗回調的剩余部分。listevent
調用和AJAX調用開始,而不是等待它完成,它移動到下一行,即listevent
document.getElementById("sidebar").insertAdjacentHTML( 'afterbegin', "Create new event successful." );
因此,我的建議是在成功回調結束時移動此 n 側。listevent
添加回答
舉報