How to reset timeout in Javascript/jQuery?

Question

I've got a field A in my webpage which, when edited by the user, invokes an API call (using jQuery), which updates field B. After the edit, the API should be called every 10 seconds to update the field B again. I currently do this using:

setTimeout(thisFunction, 10000);

The problem is that this timeout is set every time the user edits field A, which after editing field A a couple times causes the timeout to be set multiple times and the API to be called many many times. This makes the website look pretty stressy.

What I would rather like to do, is set a new timeout every time the field is edited, be it either by the user editing field A, or by the interval reaching 10 seconds and thereby polling the API. In other words; the field should be updated if field B wasn't updated for 10 or more seconds.

Lastly, if the user then clicks button C, the polling should stop.

So my question; how can I run a function to update field B if that field B wasn't updated for 10 or more seconds and how do I stop the polling when I want to (when the user clicks another button) All tips are welcome!

Answer 1

A timer can be cancelled with clearTimeout, so:

var timer = null;
if (timer) {
    clearTimeout(timer); //cancel the previous timer.
    timer = null;
}
timer = setTimeout(thisFunction, 10000);