Adjusting the settimeout delay time during its execution

Question

Adjusting the settimeout delay time during its execution

Is there a way to adjust the setTimeout delay time while it is already running? I tried using debounceTime() as an alternative, but I would like to modify the existing delay time instead of creating a new one.

In the code snippet provided, the delay is set to 10 seconds. However, I am looking for a solution where I can update the delay time dynamically when a mouse event is triggered while the setTimeout function is still running.

Your guidance on this matter would be greatly appreciated. Thank you!

javascript angular typescript rxjs6

Answer 1

Answer №1

To simplify the process, you can utilize a custom Timer class. Check out the following example of its implementation. Use the method Timer.start to initiate the timer. In case you need to modify any data and run it again, employ Timer.interrupt. This function calculates the difference and restarts the process, allowing for logic modifications.

class Timer {
  constructor(cb, ms = 2000) {
    this._ms = ms;
    this.ms = ms;
    this.cb = cb;
    this.timer = null;
    this.startedAt = null;
  }
  start() {
    this.startedAt = new Date().getTime();
    clearTimeout(this.timer);
    console.log("started");
    this.timer = setTimeout(() => {
      this.cb();
    }, this._ms);
  }
  intrupt() {
    const timeSpends = new Date().getTime() - this.startedAt;
    const timeLeft = this.ms - timeSpends;
    if (timeLeft > 0) {
      this._ms = timeLeft;
      this.start();
    }
  }
}
console.time("TIME");
let counter = 0;
const timer = new Timer(() => {
  console.timeEnd("TIME");
  console.log("counter: ", counter);
});

timer.start();
setTimeout(function cancel() {
  counter++;
  timer.intrupt();
}, 1000);

Answer 2

To simplify the process, you can utilize a custom Timer class. Check out the following example of its implementation. Use the method Timer.start to initiate the timer. In case you need to modify any data and run it again, employ Timer.interrupt. This function calculates the difference and restarts the process, allowing for logic modifications.

class Timer {
  constructor(cb, ms = 2000) {
    this._ms = ms;
    this.ms = ms;
    this.cb = cb;
    this.timer = null;
    this.startedAt = null;
  }
  start() {
    this.startedAt = new Date().getTime();
    clearTimeout(this.timer);
    console.log("started");
    this.timer = setTimeout(() => {
      this.cb();
    }, this._ms);
  }
  intrupt() {
    const timeSpends = new Date().getTime() - this.startedAt;
    const timeLeft = this.ms - timeSpends;
    if (timeLeft > 0) {
      this._ms = timeLeft;
      this.start();
    }
  }
}
console.time("TIME");
let counter = 0;
const timer = new Timer(() => {
  console.timeEnd("TIME");
  console.log("counter: ", counter);
});

timer.start();
setTimeout(function cancel() {
  counter++;
  timer.intrupt();
}, 1000);

Adjusting the settimeout delay time during its execution

Answer №1

Similar questions

Guide to sending jQuery data back to main class in TypeScript

What is the best way to recover past messages from a channel?

Is there a better option than the Korean Syllable PHP or JavaScript Romanizer?

"Unlocking the Power of Material UI withStyles() in React JS: Mixing and Matching Styles for Stunning

What are the steps to execute PhantomJS on a client machine?

Having trouble setting up a new Angular project using NodeJS?

How can we show a div element when hovering over another element using css-in-js?

Understanding the behavior of subjects and observables in Angular 8 is crucial for

Retrieving information from Flask server using an Ajax request

Unlocking the invitable_friends permission dialog on Facebook API: A step-by-step guide

How to handle event methods with Vue

Is there a way to append a unique property with varying values to an array of objects in TypeScript?

The input value fails to update after the method is called

The server encountered an issue with starting the ANCM Out-Of-Process, resulting in HTTP Error 502

Explore the titles provided by Wikipedia

Prevent resizing or zooming on AmCharts4 radar chart

What is the best way to modify an array within separate functions in a NodeJS environment?

Angular 2 click event with changing function name

Develop a child interface within Typescript

It is not possible to upload files larger than 4mb in ASP.NET MVC3