0

我已经从 oleq 实现了这个：如何在服务器上保存内联编辑器内容？ 

CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editable', {
    on: {
        instanceReady: function() {
            periodicData();
        }
    }
} );

var periodicData = ( function(){
    var data, oldData;

    return function() {
        if ( ( data = editor.getData() ) !== oldData ) {
            oldData = data;
            console.log( data );
            // Do sth with your data...
        }

        setTimeout( periodicData, 1000 );
    };
})();

函数periodicData 将检查内容是否每秒钟都发生变化并做某事。我的问题是我将使用昂贵的数据库更新来做一个 ajax 发布，而这种更新无法以每秒的速度进行。我在想，如果我可以按照periodicData 的方式做一些事情，但检查可编辑对象在最后x 秒内是否没有keyup。这种方式将节省大量昂贵的 ajax 调用。

我尝试了几次，但未能在最后 x 秒内实现 has not a keyup。想法就在这里：如何延迟 .keyup() 处理程序直到用户停止输入？但我可以把这两个缝合在一起。

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

// Usage:
$('input').keyup(function() {
    delay(function(){
      alert('Time elapsed!');
    }, 1000 );
});

我很感激任何提示。提前致谢。

4

1 回答 1

0

在过去几天的不同更新方案中，我已经尝试过这个算法。它工作得很好。它在客户端节省了大量的文本比较和对服务器端的许多不必要的 ajax 调用。我无法让 keyup 事件正常工作，但关键事件工作正常。只要最后一次击键，内容就会更新。blur 事件确保内容最终得到更新。

CKEDITOR.disableAutoInline = true;
    var ed = CKEDITOR.inline("editable", {on: {
        key:  function(){delay(function(){post();}, 1000);},
        blur: function(){post();}
    }
} );

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

function post() {
    // expensive update ajax call such as 
    // updating database or 
    // rewrite to file system etc ...
    $.post("update.php", 
        {data:ed.getData()}
    );
}
于 2013-06-12T18:23:31.060 回答