Question

我有一段内容允许用户在双击时进行编辑。如果用户更改内容然后停止2秒，则更新的内容将发送到服务器以进行保存。

为此，我已将input事件监听器绑定到该部分，开始倒计时2秒，如果已经倒计时，前者将被取消，而新的将开始。在倒计时结束时，http POST请求将使用新数据发送到服务器。

问题在于，有时在倒计时结束时，我会看到发送了2个或更多请求，好像在插入新请求之前没有取消倒计时，我无法弄清楚原因。

有问题的代码如下：

//this function is bound to a double-click event on an element
function makeEditable(elem, attr) {

    //holder for the timeout promise
    var toSaveTimeout = undefined;

    elem.attr("contentEditable", "true");
    elem.on("input", function () {

        //if a countdown is already in place, cancel it
        if(toSaveTimeout) {
            //I am worried that sometimes this line is skipped from some reason
            $timeout.cancel(toSaveTimeout);
        }
        toSaveTimeout = $timeout(function () {
            //The following console line will sometimes appear twice in a row, only miliseconds apart
            console.log("Sending a save. Time: " + Date.now());
            $http({
                url: "/",
                method: "POST",
                data: {
                    action: "edit_content",
                    section: attr.afeContentBox,
                    content: elem.html()
                }
            }).then(function (res) {
                $rootScope.data = "Saved";
            }, function (res) {
                $rootScope.data = "Error while saving";
            });
        }, 2000);
    });

    //The following functions will stop the above behaviour if the user clicks anywhere else on the page
    angular.element(document).on("click", function () {
        unmakeEditable(elem);
        angular.element(document).off("click");
        elem.off("click");
    });
    elem.on("click", function (e) {
        e.stopPropagation();
    });
}

Answer 1

结果（在上面的评论员的帮助下）函数makeEditable被多次调用。

在函数开头添加以下两行代码修复了问题：

//if element is already editable - ignore
if(elem.attr("contentEditable") === "true")
    return;

替换超时事件触发两次或更多次（有时）

1 个答案: