Home > Web Front-end > JS Tutorial > How to Control Active Timeouts in Javascript: Pausing, Resuming, and Retrieving Remaining Time

How to Control Active Timeouts in Javascript: Pausing, Resuming, and Retrieving Remaining Time

DDD
Release: 2024-10-22 22:36:29
Original
265 people have browsed it

How to Control Active Timeouts in Javascript: Pausing, Resuming, and Retrieving Remaining Time

Controlling Active Timeouts with Javascript

Managing active timeouts in Javascript is often necessary for various applications. One may encounter situations where pausing and resuming a running timeout is desired. Additionally, obtaining the remaining time on a current timeout can be useful in certain scenarios.

Pause and Resume a Timeout

To pause an active timeout, one can utilize a wrapped version of window.setTimeout. This wrapper introduces a Timer class that provides pause and resume methods. Here's an example:

<code class="javascript">var Timer = function(callback, delay) {
    var timerId, start, remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        timerId = null;
        remaining -= Date.now() - start;
    };

    this.resume = function() {
        if (timerId) {
            return;
        }

        start = Date.now();
        timerId = window.setTimeout(callback, remaining);
    };

    this.resume();
};</code>
Copy after login

To use this class, create a Timer instance and pass in the callback function and delay as arguments. Then, use the pause and resume methods as needed.

Get Remaining Time on Timeout

Unfortunately, there is no native way to obtain the remaining time on a current timeout in Javascript. However, you can emulate this functionality by storing the current timestamp when the timeout is set and then calculating the remaining time by subtracting this timestamp from the current time.

The above is the detailed content of How to Control Active Timeouts in Javascript: Pausing, Resuming, and Retrieving Remaining Time. For more information, please follow other related articles on the PHP Chinese website!

source:php
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template