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

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;