How to use mouseup to trigger countdown in javascript

Question

I am trying to count to 0 from any given number on mouseup to animate the src attribute of an img tag.

var count = 0,
    direction = 1,
    image = document.getElementById('myImage'),
    mousedownID = -1; 

function mousedown(event) {
    if(mousedownID==-1) 
       mousedownID = setInterval(whilemousedown, 150);
}

function mouseup(event) {
    if(mousedownID!=-1) {
      mousedownID = setInterval(after, 150);
      clearInterval(mousedownID);
      mousedownID=-1;
    }
}

function whilemousedown() {
    image.src = "block-" + count + ".png";

    count += direction;
    direction *= (((count % 11) == 0) ? -1 : 1);
}

function after() {
    image.src = "block-" + count + ".png";
    count = count - 1;
    if(count = 0){
      clearInterval(mousedownID);
    }
}

document.addEventListener("mousedown", mousedown);
document.addEventListener("mouseup", mouseup);
document.addEventListener("mouseout", mouseup);

While the mouse is clicked, 12 images being animated, 1 … 12 … 1 … 12 … and so on, now i'd like to animate it back to the first image, once i released the mousebutton.

`if(count = 0)` this is very different from `if(count == 0)` — William, Nov 07 '15 at 11:51
thanks, but this didn't fix it yet. I try to trigger the function `after` with `mousedown`. I think there might be an issue with the line `mousedownID = setInterval(after, 150);` or its placement. — pikoo, Nov 07 '15 at 12:22
here is a fiddle, where i changed it to the .alt atrribute: https://jsfiddle.net/jk8h2341/ i commented the line that stopped the function whilemousedown from running — pikoo, Nov 07 '15 at 12:47
it seems that you can delete `function after()`, right? and to have 1..12 instead of 1..11 you just have to change `count % 11` to `count % 12` — William, Nov 07 '15 at 14:00
thats true, but what I am trying to do is after i release the mouse button, to count down back to zero from any number, so i have a smooth animation back to the first image — pikoo, Nov 07 '15 at 14:26

score 0 · Accepted Answer · answered Nov 07 '15 at 15:42

You can use two setInterval, one just to increase/decrease, and another just to decrease:

var limit = 11,
    count = 0,
    direction = -1,
    image = document.getElementById('myImage'),
    mousedownID = -1,
    mouseupID = -1; 

function mousedown(event) {
    if(mousedownID == -1) {
        if (mouseupID != -1) {
            clearInterval(mouseupID);
            mouseupID = -1;
        }

        mousedownID = setInterval(whilemousedown, 150);
    }
}

function mouseup(event) {
    if(mousedownID != -1) {
        clearInterval(mousedownID);
        mousedownID = -1;

        if (mouseupID == -1) {
            direction = -1;  // delete this if you prefer
            mouseupID = setInterval(after, 150);
        }
    }
}

function whilemousedown() {
    image.src = "block-" + count + ".png";

    if (count == 0) {
        direction = +1;
    } else if (count == limit) {
        direction = -1;
    }

    count += direction;
}

function after() {
    if (count == 0) {
        clearInterval(mouseupID);
        mouseupID = -1;
        return;
    }

    count = count - 1;
    image.src = "block-" + count + ".png";
}

document.addEventListener("mousedown", mousedown);
document.addEventListener("mouseup", mouseup);
document.addEventListener("mouseout", mouseup);

thank you! this actually solved it. just one thing though, if I realease the mousebutton know, while `whilemousedown` is counting upwards, there is a small pause on the last image, before it starts counting down. — pikoo, Nov 07 '15 at 18:04
it's because `setInterval(after, 150)` will wait 150 ms before calling `after()`, but you want to call it immediately *and* set the interval... see here: http://stackoverflow.com/questions/6685396/execute-the-first-time-the-setinterval-without-delay — William, Nov 07 '15 at 20:47

How to use mouseup to trigger countdown in javascript

1 Answers1