如何在ckEditor中按下按鍵時減少觸發的事件數量？

我使用CKEDITOR，並有包含指令：如何在ckEditor中按下按鍵時減少觸發的事件數量？

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

這拿起編輯器中的每一個變化，以模式和關鍵點擊更新模型。

但是，我注意到這些變化正在放緩數據錄入。有沒有辦法讓我仍然可以捕捉到每個按鍵，但沒有對模型進行如此多的更新。我正在考慮某種超時時間，但我不知道如何實現這一點。

來源

2013-10-17 Samantha J T Star

CKEditor已經實現了這樣的功能。請參閱：[CKEDITOR.tools.eventsBuffer]（http://docs.ckeditor.com/#!/api/CKEDITOR.tools-method-eventsBuffer）。 – oleq

這是另一種不使用間隔的方法。每次按下某個鍵時，都會啓動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，更改表格屬性以及拖動圖像等。

來源

2013-10-17 09:34:10 Nenotlep

有趣的解決方案，但我能看到的唯一問題是，如果模型需要不斷更新，並且用戶輸入的速度超過了超時時間，那麼只有當您停止輸入時纔會更新 - 儘管只是一個小小的點滴，但比我更整潔！ –

@BCotter Ach我看到了，我沒有考慮到這一點，這種方法在這種情況下確實不是很好，我可能不得不考慮別的，謝謝評論！ – Nenotlep

呃..更新後的解決方案有一個競爭狀態問題，如果在update（）仍然發生時觸發'key'事件，但是如果update（）同步，那麼它不應該那麼糟糕，I估計是這樣。 – Nenotlep

這樣做的一種方法是在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-17 09:06:07

如何在ckEditor中按下按鍵時減少觸發的事件數量？

回答

相關問題