Best approach for auto save on-change

Question

I want to remove the "save" button and auto-save changes live.

The way I know this can be done is by using the OnChange function.

Baring in mind that the web application will be used by quite a lot of people, the number of requests to the server will most likely reach to an overwhelming level in a very short period of time.

What is the best approach to auto save without overwhelming / sending so many requests to the server?

There are two types of editable fields:

1- Simple fields which would have small amount of letters/words.

2- Text-areas for large amount of copy.

Answer 1

Personally, I'd be doing this on a debounce of say half a second to a second. If a user stops typing for a specified period of time, the save is actioned. It's also pretty simple to achieve:

var debounce = null;
$(document).ready(function() {
    $('.field').keydown(function() {
        clearTimeout(debounce);
        debounce = setTimeout(function(){
            // SAVE
        }, 500);
    });
});