javascript - TinyMCE 是脏方法

Question

我有一个制作卡片的网络项目。我有一个 tinyMCE 文本字段和卡片的视觉效果。更改 tinyMCE 编辑器的内容后，我想更新卡片的视觉效果以反射(reflect)新的文本/更改。

TinyMCE 带有一个 IsDirty 方法:

if (tinyMCE.activeEditor.isDirty())
    alert("You must save your contents.");

我不明白的是，我会将此 if 语句放在哪里以定期检查它。我知道 JS 是事件驱动的，所以它需要被“调用”，我是否在每次按键时都调用它？

Answer 1

您可以添加一个全局超时函数，每隔一秒左右(时间间隔由您决定)检查一次:

function updateCardIfDirty() {
  if (tinyMCE.isDirty()) {
    // rerender the card
  }
}

setInterval(updateCardIfDirty, 2000); // check every 2 seconds.

更简洁的解决方案可能是每次他们在 tinyMCE 编辑器中进行更改时进行检查。这可以通过 onChange() 事件实现 tinyMCE provides ，如下:

tinyMCE.init({
  ...
  setup : function(ed) {
     ed.onChange.add(function(ed, l) {
       // rerender the card
     });
  }
});

第一种方法的缺点是它每 2 秒执行一次，即使他们在一个小时内没有编辑卡片也是如此。第二种方法的缺点是，如果他们在 1 秒内执行 10 次编辑，它将在那一秒内重新渲染卡片 10 次。

最后，让我们尝试第三种方法，它兼具两全其美的优点，同时消除了我们提到的两个缺点:

tinyMCE.init({
  ...
  setup : function(ed) {
     ed.onChange.add(function(ed, l) {

       if (timeout) {
          clearTimeout(timeout);
       }

       timeout = setTimeout(function(){ timeout=null; rerenderCard(); }, 1000);

     });
  }
});