Is there a way for the window.onbeforeunload event to wait for an ongoing animation to finish

Question

Is there a way for the window.onbeforeunload event to wait for an ongoing animation to finish

Exploring the JavaScript code below which utilizes an animation library (such as scriptaculous).

window.onbeforeunload = function(event) {
    document.body.fade();
}

When leaving the page, the animation does not finish before the page changes. This raises questions about JavaScript's threading capabilities and the possibility of parallel processes. Are threads at play here, and is there a solution to ensure the animation completes before the page transition?

javascript multithreading animation dom-events scriptaculous

Answer 1

Answer №1

Although it may be a bit late, providing an answer can be valuable for future SO users.

There are several ways to synchronize your code, including adding a custom waiter.

window.onbeforeunload = function(event) {
    document.body.fade();
    while ((new Date()).getTime() < (new Date()).getTime()) + (1 *1000));
}

Another approach could be using promises:

function sleep(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve(null);
    }, time);
  });
}

window.onbeforeunload = async function(event) {
    document.body.fade();
    await sleep(1 * 1000);
}

Answer 2

Although it may be a bit late, providing an answer can be valuable for future SO users.

There are several ways to synchronize your code, including adding a custom waiter.

window.onbeforeunload = function(event) {
    document.body.fade();
    while ((new Date()).getTime() < (new Date()).getTime()) + (1 *1000));
}

Another approach could be using promises:

function sleep(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve(null);
    }, time);
  });
}

window.onbeforeunload = async function(event) {
    document.body.fade();
    await sleep(1 * 1000);
}

Is there a way for the window.onbeforeunload event to wait for an ongoing animation to finish

Answer №1

Similar questions

Efficient State Management with React-Redux for Streamlined HTTP Requests

Organizing items within a group

The best practices for managing item spacing in React or React Native

Creating dynamic charts in Javascript using Firebase

What is the best way to prevent using a function expression in order to return a local variable within an AngularJS factory?

neither displayed on the webpage nor logged in the console

Wait for a reply from one GET request before initiating the next one in node

I attempted to retrieve a PHP file in my HTML document using AJAX, however, the scripts embedded in the file are not functioning as expected

Is it practical to extract the page type/name from the CSS of the selected tab?

Exploring the Angular framework: Combining form requirements and controllers in directives' link functions

AngularJS: Issues with data retrieval in parallel in $http get requests within a $.each loop

Getting the chosen value from a dropdown menu on form submission using PHP

Tips for choosing a particular list item using jQuery: retrieve the attribute value of 'value' and showcase it on the webpage

Restricting array elements through union types in TypeScript

Generating JSON Data with the Power of JavaScript and JQuery

Sorting and filtering data using AngularJS filter and orderBy inside a controller or factory

The named group Wildcard (:name*) is not functioning as expected when used with $routeProvider in AngularJS version 1.0

What is the best way to retrieve the object of the selected option from a single select input in Angular

Is there a specific directive in Angular that allows for variable declarations using the "

Embarking on the journey of launching an Angular application on AWS CloudFront