Angularjs 如何减少在ckEditor中按下某个键时触发的事件数？

我正在使用ckEditor，并且有一个指令包含：

    ck.on('key', function () {
        $scope.$apply(function () {
            ngModel.$setViewValue(ck.getData());
            console.log("Updating the model - key - " + attr['name']);
        });
    });

这将拾取对模式的每次更改，并在编辑器中单击关键点，并更新模型

---

然而，我注意到这些变化正在减缓数据输入的速度。有没有一种方法，我仍然可以抓住每一个按键，但没有这么多的更新模型。我在考虑某种类型的超时，但我不确定如何实现它。

实现这一点的一种方法是将设置的时间间隔包装在设置的keydown超时中，这将允许您不断更新和应用，但前提是他们最近键入

像这样的

   var x = setInterval(function() {
       $scope.$apply(function () {
           ngModel.$setViewValue(ck.getData());
       });
   }, 200);

   ck.on('key', function () {
   if (!x) {
        x = setInterval(function() {
       $scope.$apply(function () {
           ngModel.$setViewValue(ck.getData());
       });
   }, 200);
   };
   setTimeout(function() {
       window.clearInterval(x), 2000
   });   
});

然而，我还没有测试这段代码，但是如果您想对您描述的情况进行修改，我可以做一些测试

---

编辑：刚刚意识到前面的方法将为每个回调作用域创建间隔。

一种方法是将设置的间隔封装在设置的键下超时中，这将允许您不断更新和应用，但仅当他们最近键入时

像这样的

   var x = setInterval(function() {
       $scope.$apply(function () {
           ngModel.$setViewValue(ck.getData());
       });
   }, 200);

   ck.on('key', function () {
   if (!x) {
        x = setInterval(function() {
       $scope.$apply(function () {
           ngModel.$setViewValue(ck.getData());
       });
   }, 200);
   };
   setTimeout(function() {
       window.clearInterval(x), 2000
   });   
});

然而，我还没有测试这段代码，但是如果您想对您描述的情况进行修改，我可以做一些测试

---

编辑：前面的方法将为每个回调作用域创建间隔。

这里有一个不使用间隔的替代方法。每次按键时，启动1s超时，然后执行更新。如果按键频率超过1秒，使其过快，只需重置计时器。您也可以对其他事件使用相同的计时器和相同的更新功能，这使它成为一个可伸缩的好方法

function update() {
    $scope.$apply(function () {
        ngModel.$setViewValue(ck.getData());
        console.log("Updating the model - key - " + attr['name']);
    });
}

var timeout = 1000, timer;

ck.on('key', function () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        update();
    }, timeout);
});

或者，如果你想在按键时每n秒更新一次，你可以这样做

var timeout = 1000, timer, updating = false;

function update() {
    $scope.$apply(function () {
        ngModel.$setViewValue(ck.getData());
        console.log("Updating the model - key - " + attr['name']);
        updating = false;
    });
}

ck.on('key', function () {
    if (updating === true) return;
    updating = true;
    timer = setTimeout(function() {
        update();
    }, timeout);
});

---

但是，如果需要检查内容是否已更改，而不是按键是否已更改，则可以使用

ck.checkDirty（）

和

ck.resetDirty（）

结合间隔进行检查。还有一个

change

事件，但我还没有测试它。有许多不同的内容更改不会触发

键

事件，例如，加粗一些文本、通过图标添加图像或HR、更改表格属性以及拖动图像。

这里有一种不使用间隔的替代方法。每次按键时，启动1s超时，然后执行更新。如果按键频率超过1秒，使其过快，只需重置计时器。您也可以对其他事件使用相同的计时器和相同的更新功能，这使它成为一个可伸缩的好方法

function update() {
    $scope.$apply(function () {
        ngModel.$setViewValue(ck.getData());
        console.log("Updating the model - key - " + attr['name']);
    });
}

var timeout = 1000, timer;

ck.on('key', function () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        update();
    }, timeout);
});

或者，如果你想在按键时每n秒更新一次，你可以这样做

var timeout = 1000, timer, updating = false;

function update() {
    $scope.$apply(function () {
        ngModel.$setViewValue(ck.getData());
        console.log("Updating the model - key - " + attr['name']);
        updating = false;
    });
}

ck.on('key', function () {
    if (updating === true) return;
    updating = true;
    timer = setTimeout(function() {
        update();
    }, timeout);
});

---

但是，如果需要检查内容是否已更改，而不是按键是否已更改，则可以使用

ck.checkDirty（）

和

ck.resetDirty（）

结合间隔进行检查。还有一个

change

事件，但我还没有测试它。有许多不同的内容更改不会触发

键

事件，例如加粗一些文本、通过图标添加图像或HR、更改表格属性以及拖动图像等。

有趣的解决方案，但我能看到的唯一问题是模型是否需要持续更新，而且用户打字速度比超时快，它只会在你停止打字时更新——不过只是一个小的小问题，而且比我的要整洁得多@B我明白了，我没有考虑到这一点，这种方法在那种情况下不是很好。事实上，我可能不得不想些别的，谢谢你的评论！无聊的。。更新后的解决方案有一个竞争条件，比如当

update（）

仍在发生时触发

key

事件，但如果

update（）

是同步的（我猜是同步的），应该不会那么糟糕。有趣的解决方案，但是我能看到的唯一问题是模型是否需要持续更新，而且用户输入的速度比超时时间快，它只会在你停止输入后更新-虽然只是一个小问题，而且比我的要整洁得多@B我明白了，我没有考虑到这一点，这种方法在那种情况下不是很好。事实上，我可能不得不想些别的，谢谢你的评论！无聊的。。更新后的解决方案有一个竞争条件，比如当

update（）

仍在发生时触发

key

事件，但如果

update（）

是同步的（我猜是同步的），情况应该不会那么糟。CKEditor已经实现了这样的功能。请参阅：.CKEditor已实现此功能。请参阅：。