Mithril.js: Debounce events

Disable auto-redraw with e.redraw = false and use an timeout.

Example using the oninput event:

let timeout
let value = '25'

function oninput(e) {
e.redraw = false

// Update state because we are using a controller component
value = e.currentTarget.value

clearTimeout(timeout)
timeout = setTimeout(() => {
// Do something more here if needed

// Plus probably redraw manually
m.redraw()
}, 1000)
}

const App = {
view: () => [
m('input[type=text]', { oninput, value }),

// Updating of this value is debounced
m('p', Math.sqrt(value)),
],
}

Test the code on flems.io

Another example on flems.io