jQuery UI droppable 在开始触发 ajax 请求时触发多次

Question

您好，我使用的是 jQuery UI，更具体地说，我使用的是可拖动和可放置的。当用户开始拖动元素时，我会触发一个 ajax 请求，该请求将为其他用户禁用此功能。然而，这是两次而不是一次，我不知道为什么。我的代码如下：

$("ul.draggable li").draggable({
                revert: "invalid",
                containment: "document",
                start: function (event, ui) {
                    console.log('start drag...disable item for all other users');
                    var id = $(this).attr('data-taskprogress-id');
                    $.ajax({
                        url: '/task/board/disableTask/' + id,
                        async: true,
                        dataType: 'json',
                        contentType: 'application/json',
                        data: data,
                        type: 'POST',
                        success: function (json) {
                            var Successmessage = JSON.stringify(json.message);
                            toastr.success(Successmessage);

                            taskBoard.update('/task/board/fetchScrumBoardView/'+sprint_id );

                        } // end success

                    }); // end ajax
                }, // end start
            });

有没有一种方法可以确保它至少只运行一次，直到有响应反馈？

Answer 1

每当ul.draggable li 被拖动时，您的代码都会触发一个 ajax 调用，因为您总是无限制地触发 ajax，这就是它多次发生的原因。

要确保单个 ajax 正在运行，您需要进行一些特定的处理：

ajaxStart 注册一个处理程序，以便在第一个 Ajax 请求开始时调用，并且在所有 Ajax 请求完成后调用ajaxStop。

您可以做的是识别您的呼叫，给每个呼叫一个 id 并将其放入队列中（实际上是一个数组，但具有特定的处理）。

每当调用拖动函数时，您可以检查队列是否为空，然后进行 ajax 调用并设置一个全局 js 标志，表示 ajax 正在运行为真。否则，将请求 ajax 的 id 添加到队列中。

在 ajax 停止时，检查队列是否为空，如果是则将标志设置为 false，否则使用下一个 id 调用 ajax 函数并将其从队列中删除。

这是一场头脑风暴，会让你走上正轨。