Question

I have a form containing a Repeater which has a RadioButtonList and a TextBox. When a user changes the radio button or the text in one of the TextBoxes, the selected item and associated text for that Repeater item should get saved to the database.

Saving when a radio button changes is easy because of the .change() function, however for the TextBox I am creating a timer when the text changes that saves the data 2 seconds after the user stops typing

The problem is, if the user leaves the page or starts typing in a different TextBox before the timer executes, I need to manually execute the timer. How can I do that?

My javascript looks like this:

var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example

$('textarea').on('input', function () {
    // Clear timer
    clearTimeout(typingTimer);

    // Set new timer to save form, passing current repeater item to Save method
    var parent = $(this).closest('.my-repeater-section');
    typingTimer = setTimeout(function () { saveForm(parent); }, doneTypingInterval);
});

Answer 1

A timer is just a delayed function call. So, name your function and you’ll be able to call it “manually:”

var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example

$('textarea').on('input', function () {
    // Clear timer
    clearTimeout(typingTimer);

    // Set new timer to save form, passing current repeater item to Save method
    var parent = $(this).closest('.my-repeater-section');

    function callback() {
        saveForm(parent);
    }

    typingTimer = setTimeout(callback, doneTypingInterval);

    // call it manually like usual:
    // callback();
});