I want to process the style change after it is reflected on the screen.

I am writing a script to read and print excel in the browser client script (javascript).

I'd like to pop up a display like "Processing..." because it takes time from the start of the excel application to the printing process, but I don't know how to write it well.

Currently, I am writing as follows, but using setTimeout doesn't fit me well...

javascript-side
Rendering queue tasks when changing styles Is there any way to force it?

// Display in-process messages
const progress= document.querySelector('#progress');
progress.style.display='block';//display: none->block

setTimeout(()=>{

  // time-consuming processing
  const excel = new ActiveXObject('Excel.Application');
  // Print processing...etc.

  // Hide messages in progress
  progress.style.display='none';

},0);

javascript

2022-09-30 21:53

1 Answers

●setTimeout(...,0) does not guarantee it will be reflected on the screen

The ● standard determines that the style is reflected on the screen immediately after the requestAnimationFrame callback.So you can do requestAnimationFrame twice.

progress.style.display='block';
requestAnimationFrame(function(){
  requestAnimationFrame(function(){
    // time-consuming processing
    ...
  });
});

However, we do not know if IE meets the standards properly.

●An old method is to read values that cannot be obtained unless the screen layout is determined.

progress.style.display='block';
progress.offsetWidth;// Read only and not use
// time-consuming processing
...

2022-09-30 21:53

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656