I'm a js newbie but from what I read, using clearInterval with id returned previously by setInterval should reset the timer.
On a pedal push I receive a midi event with a positive value and then same event with a zero value on pedal release.
Using the code below, I can see my page turning red on release but the page keeps scrolling. Any idea why ?
function handleMIDIMessage(event) {
var scroll_id;
if (event.data.length === 3) {
if (event.data[0] == 176 && event.data[1] === 67) {
if (event.data[2] > 0) {
scroll_id = setInterval(function() {
window.scrollBy({
top: 50,
behaviour: "smooth"
});
}, 1000);
document.body.style.background = 'green';
} else {
document.body.style.background = 'red';
clearInterval(scroll_id);
}
}
}
}
You need to declare the interval outside so you do not keep creating a new variable and losing the id. You should probably also check to make sure you are not creating more than one interval.
//declare it so it is not overwritten
var scroll_id;
function handleMIDIMessage(event) {
if (event.data.length === 3) {
if (event.data[0] == 176 && event.data[1] === 67) {
if (event.data[2] > 0) {
// if we were defined before, cancel the last one
if (scroll_id) window.clearInterval(scroll_id);
scroll_id = setInterval(function() {
window.scrollBy({
top: 50,
behaviour: "smooth"
});
}, 1000);
document.body.style.background = 'green';
} else {
document.body.style.background = 'red';
clearInterval(scroll_id);
}
}
}
}