Data updating algorithm for inline CKEditor

Question

I have implemented this from oleq: How do I save inline editor contents on the server?

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

The function periodicData will check if the contents changed every second and Do sth. My problem is I will do an ajax post with an expensive database update that cannot afford at the rate of every second. I was thinking that if I can do something along the line of periodicData but check if the editable has not a keyup in the last x seconds instead. That way will save a lot of expensive ajax calls.

I've tried few times but fail to implement the has not a keyup in the last x seconds. The idea is here: How to delay the .keyup() handler until the user stops typing? but I could stitch these two together.

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

I appreciate for any hints. Thanks in advance.

Why don't you basically increase the interval from 1s to let's say 5s? Or 10s? — oleq, Jun 09 '13 at 08:51
@oleq, with all due respect and for the sake of argument, (1) the more the interval increased the more chance of lost of key strokes right after the editable blur. (2) The expensive ajax update calls are unnecessary except for the very last one. (3) The contents comparisons are proportional with the length of text while checking keyup is constant. — ngungo, Jun 10 '13 at 15:20

ngungo · Answer 1 · 2013-06-12T18:31:54.347

I have tried this algorithm for last few days of different update schemes. It works beautifully. It saves a lot of text comparisons on client side and many unnecessary ajax calls to server side. I could not get a keyup event working but key event works fine. This guaranty as long as the last key strike the contents get updated. The blur event makes sure the contents get updated finally.

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

Data updating algorithm for inline CKEditor

1 Answers1