Question

我通过将对象数组（复选框树中的选定值）发送到我的$.post来进行API调用每次鼠标离开复选框树所在的div时。问题是用户通过随机移动鼠标可能会离开并输入千分之一秒的时间，这样将导致无用的$.post提交，而且发送的内容没有更改，因此不会获取新数据。

实际上，这是当前代码的样子：

$("div.sidebar-wrapper")
    .mouseleave(function () {
        postPareto();
    });

function postPareto() {
    $.ajax({
        type: "POST",
        data: JSON.stringify(config_Array()),
        url: "api/prodotti/pareto/",
        contentType: "application/json",
        success: function (dati) {
            tablePareto(dati);
        }
    });
}

所以我的问题是，如果内容没有更改，是否有办法防止$.post被提交，或者我是否应该找到另一种方法来提交复选框选择（因为这是我选择的复选框树）在mouseleave上提交数据，以便用户有一些时间来决定要检查的内容）？

Answer 1

在这种情况下，我将执行以下操作（简单的解决方案）：

$("div.sidebar-wrapper")
    .mouseleave(function () {
        postPareto();
    });

// Save reference to previous value
let prevValue = null;
function postPareto() {
    let data = JSON.stringify(config_Array());

    // If it is the same value we can return and not perform POST 
    if (data === prevValue){
        return;
    } else {
        // Assign new value to prevValue
        prevValue = data;
    }

    $.ajax({
        type: "POST",
        data: JSON.stringify(config_Array()),
        url: "api/prodotti/pareto/",
        contentType: "application/json",
        success: function (dati) {
            tablePareto(dati);
        }
    });
}

研究rxjs可能是一个好主意，它对于响应站点而言非常酷并且功能强大。例如，在rxjs中，您可以执行以下操作：

const input = document.querySelector('div.sidebar-wrapper');
const observable = fromEvent(input, 'mouseleave');

observable
  .map((event: any) => config_Array()),
  .distinctUntilChanged() // Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item.
  .subscribe((resp) => {
    // This will only be called if value changes
    console.log(resp); // resp will be the result from `config_Array()`
  });

您可以查看this文章，该文章对此进行了更深入的说明

如果内容未更改，如何防止$ .POST？

1 个答案: