Zero-dependency replacement for setTimeout() with five types of repeating timer objects, timers on elements, easier cancellation, unit tests, and promise-syntax.
This one shows a timer with a given name is unique. Each time you type a key, the
timer restarts -- cancelling any previous timer by that name. Previous timers
cancel automatically.
Type in the text input, then watch the timer trigger 1 second after you stop.
Also try typing very slowly, with about 800ms between keyup events. The timer function
doesn't run because each key resets the timer before it can trigger.
Example 3: Run repeatedly at exact intervals of 1 second, with 4 total runs
This kind of timer is similar to Javascript's setInterval. The timer duration is started when the
do() function *starts*. The amount of time in between the end of the previous run and the start of the next
run can vary, depending on how long your function takes to run.
However, contrary to setInterval, two simultaneous runs of do() are not allowed. For example, if you have a
timer set to repeat at 2 second intervals, but your do() function takes 5 seconds, the next run will wait
the full 5 seconds before triggering again. Each run will essentially start immediately after the one before it
(since the 2 second interval has already expired each time). If you need a full 2 seconds between runs,
use SleepTimer (above).
Timers have three promise functions: do(), then(), and reject(). Each can be specified multiple times.
When the timer hits zero, do() is called (on repeated timers like this one, do() calls each time).
When the timer finishes its 4 runs (or you cancel it), then() is called. Although not in this example,
reject() is called if exceptions are thrown in your do() functions.
Note also the timer object, which is sent to do() functions. This object has several fields of interest:
timer.timerStart
time timestamp the current timer run started
timer.runIndex
the number of times the timer has triggered
timer.timerId
the id from the internal setTimeout call
timer.elem
DOM element the timer is running on.
timer.millis
the timer duration (from options)
timer.tname
the unique timer name (from options)
timer.cancel()
method to cancel the current timer
<div id="someid4" class="message"></div>
<script>
$(function() {
var index = 1;
$('#someid4').closest('.example').find('.start_btn').click(function() {
log_msg($('#someid4'), "Starting AfterSleepTimer() - note that Run #1 triggers immediately")
var index = 1;
// TIMER CALL:
Timers.SleepAfterTimer($('#someid4')[0], 2000).do(function(timer) {
log_msg($(this), 'Run #' + index);
index++;
})
})
$('#someid4').closest('.example').find('.cancel_btn').click(function() {
Timers.cancel($('#someid4')[0])
log_msg($('#someid4'), "Cancelled!")
})
})
</script>
Example 4: Set an "After" timer to run repeatedly with exactly 2 seconds in between runs.
This one is for long-running functions (such as an Ajax call). It first runs the function, then starts the 2
seconds after the function finishes.
This is quite different than Javascript's setInterval() method because it ensures a given period between calls.
The "After" type of timer calls the function immediately, followed by the sleep delay. This is useful when you
need a periodic function but also need an initial run.
<div id="someid5" class="someclass5 message"></div>
<hr>
<div id="someid5b" class="someclass5 message"></div>
<script>
$(function() {
$('#someid5').closest('.example').find('.start_btn').click(function() {
log_msg($('.someclass5'), "Starting timers on two divs with maxRuns=3")
var elem_array = $('.someclass5')
if ($(this).attr('data-kind') == 'NodeList') {
elem_array = document.querySelectorAll('.someclass5')
}else if ($(this).attr('data-kind') == 'Array') {
elem_array = [ document.getElementById('someid5'), document.getElementById('someid5b') ]
}
// TIMER CALL on an array of elements
Timers.SleepTimer(elem_array, {
'millis': 1000,
'maxRuns': 3
}).do(function(timer) {
log_msg($(this), ".do() run #" + timer.runIndex)
}).then(function(timer) {
log_msg($(this), ".then() is called on cancel, restart, or maxRuns.")
})
})
$('#someid5').closest('.example').find('.cancel_btn').click(function() {
Timers.cancel($('.someclass5')[0])
log_msg($('.someclass5'), "Cancelled!")
})
})
</script>
Example 5: Start timers on jQuery object.
In this example, a jQuery object is sent to the Timer constructor. A timer is placed on each
element in the array.
This works on any thing that looks like an array: jQuery, Array, NodeList, etc. The returned object is a
TimerArray, which mimics the Timer interface so you can chain .do functions to it.