0

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

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

这会拾取编辑器内对模式和按键的每次更改并更新模型。

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

4

2 回答 2

2

这是一种不使用间隔的替代方法。每次按下一个键，启动 1 秒超时，然后执行更新。如果某个键被按下的频率超过 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()andck.resetDirty()结合时间间隔进行检查。还有一个change事件，但我没有测试过。有许多不同的内容更改不会触发key事件，例如将某些文本加粗、通过图标添加图像或 HR、更改表格属性以及拖动图像。

于 2013-10-17T09:34:10.750 回答
2

这样做的一种方法是在 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
   });   
});

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

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

于 2013-10-17T09:06:07.510 回答