Question

我正在使用ckEditor并且有一个包含以下内容的指令：

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

这将获取模式的每次更改，并在编辑器中单击键并更新模型。

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

Answer 1

这样做的一种方法是在keydown的set timeout中包装一个设置间隔，这样可以让你不断更新和应用，但前提是他们最近输入了。

像这样的东西

   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
   });   
});

但是，我还没有测试过这段代码，但是如果你想对你所描述的情况提出一个小问题，我可以做一些测试。

编辑：刚刚意识到以前的方法会为每个回调范围创建间隔。

Answer 2

这是一种不使用间隔的替代方法。每按一次键，启动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事件，但我还没有测试过。有许多不同的内容更改不会触发key事件，例如粗体化一些文本，通过图标添加图像或HR，更改表格属性以及拖动图像等。

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

2 个答案: