javascript - 使用 for 循环处理 ajax 问题

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 5 年前。

我正在创建 fullcalendar 来创建事件。我通过循环开始日期和结束日期从rest api 获取值。我的想法是，当那天没有数据时，我想显示事件和空闲日，但我总是得到循环结束日期。请指导我可以做什么来获得增量值(value)。

我确信它有 ajax 异步问题，因为它正在发生。我只是需要帮助

我的代码

        var startDate = calendar.fullCalendar('getView').start;
        var endDate = calendar.fullCalendar('getView').end;
        $.ajax({
            url: "/_api/lists/getbytitle('Item')/items?$select=Title,Category&$orderby=Category&$filter=Category eq '" + $("#items").val() + "'",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" }
        }).then(function (data) {
            var promises = data.d.results.map(function (item, i) {
                var _url = "/_api/lists/getbytitle('ItemRequestLog')/items?$select=Title,ItemRequest/Title,DateRequestedFrom,DateRequestedTo&$expand=ItemRequest&$filter=Title eq '" + item.Title + "'";
                for (var d = new Date(startDate.format()); d < new Date(endDate.format()); d.setDate(d.getDate() + 1)) {
                    var e = moment(d).add(1, 'days'); console.log(d) //here value is good
                    _url += " and (DateRequestedFrom ge datetime'" + d.toISOString() + "') and (DateRequestedTo le datetime'" + e.toISOString() + "')";
                    $.ajax({
                        url: _url,
                        method: "GET",
                        headers: { "Accept": "application/json; odata=verbose" }
                    }).then(function (data) {
                        if (data.d.results.length == 0) {
                            console.log(d) //here I am getting end of the loop value
                            event.title = item.Title;
                            event.start = d;
                            event.end = e;
                            event.allDay = true;
                            event.color = "yellow";
                            $('#calendar').fullCalendar('renderEvent', event, true);
                        }
                        var promises = data.d.results.map(function (itemLog, i) {
                            event.title = itemLog.Title;
                            event.start = moment(itemLog.DateRequestedFrom);
                            event.end = moment(itemLog.DateRequestedTo);
                            event.allDay = false;
                            event.color = "red";
                            $('#calendar').fullCalendar('renderEvent', event, true);
                        });
                    })
                    _url = "/_api/lists/getbytitle('ItemRequestLog')/items?$select=Title,ItemRequest/Title,DateRequestedFrom,DateRequestedTo&$expand=ItemRequest&$filter=Title eq '" + item.Title + "'";
                }
            });
        });

请帮忙解决。

Answer 1

var被提升，并且具有函数作用域，而不是 block 作用域:在异步代码中，如果您使用 for 循环，请确保使用 let ，这样，循环的每次迭代都会对相关变量有一个单独的绑定(bind)。

改变

for (var d = new Date(startDate.format()); d < new Date(endDate.format()); d.setDate(d.getDate() + 1)) {

至

for (let d = new Date(startDate.format()); d < new Date(endDate.format()); d.setDate(d.getDate() + 1)) {