Pause and resume JS function


#1

I’d like to pause JS function named 'startJSfunc' when I click an element with an ID 'pause'.
Also I’d like to resume this JS function 'startJSfunc' when I click an element with an ID 'play'.

Would it also be possible to display text 0:00 in an element with an ID 'time' when a 05:00,02 minute in a timeline named 'bar countdown' is reached?

Thanks in advance for any help.


(Jonathan Deutsch) #2

What is the javascript function doing? Javascript is single-threaded and generally takes over execution on the webpage, so you can’t easily have something running and something else controlling its execution. There are exceptions, like cancelling timeout/interval timers, using web workers, yield, or await structures. So the answer is dependent on what you’re trying to accomplish.

Either way, you can simply run javascript on click via the Action Inspector by adding an On Mouse Click action and setting it to Run Javascript….

The Inner HTML of elements is animatable, so you can make a keyframe animation that changes the text.

If you wanted to write code to do this, you could create a Timeline Action at the desired time, and then Run JavaScript… that would just call:

hypeDocument.getElementById("time").innerHTML = "0:00";

(Loves Hype) #3

I agree it’s easier to get help when the goal is defined. You are already in the execution and that is often a problem if your not a programmer or fluent in the language as it tends to over complicate things based on a wrong base assumption.

Many things depended on time can also be solved with the built in timeline(s) and timeline actions. See https://tumult.com/hype/documentation/3.0/#timeline-actions


#4

@jonathan @MaxZieb

Here’s my JS code:

function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;

    function timer() {
        // get the number of seconds that have elapsed since 
        // startTimer() was called
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // does the same job as parseInt truncates the float
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        minutes = minutes < 10 ? minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;

        display.textContent = minutes + ':' + seconds;

        if (diff <= 0) {
            // add one second so that the count down starts at the full duration
            // example 05:00 not 04:59
            start = Date.now() + 1000;
        }
    };
    // don't want to wait a full second before the timer starts
    timer();
    setInterval(timer, 1000);
}

function startJSfunc() {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

startJSfunc();

I called upon this JS function by adding Timeline Action.

What I’m trying to achieve is simple countdown animation. The timer is set to 5 minutes and is counting down until it reaches 0.

This works perfectly fine however I want the user to be able to pause & resume this countdown by click on Pause or Play button. The pause button has an ID 'pause' and play button has an ID 'play'.

What I struggle with is how to pause and resume my JS function.

Hope this clarifies my issue.


(Hans-Gerd Claßen) #5

try https://inorganik.github.io/countUp.js/

it’s nice, easy setup


(Jonathan Deutsch) #6

Cool, I understand better.

setInterval actually returns an object that can be used in the corresponding clearInterval call to stop the timer.

I’d probably just assign that to a global object and have your pause use it.

    // don't want to wait a full second before the timer starts
    timer();
    window.myTimer = setInterval(timer, 1000);
}

then pause would just be:

if(window.myTimer) {
    clearInterval(window.myTimer);
    window.myTimer = null;
}

You can check to see if window.myTimer == null to know if you should start the timer in the first place.