I am currently using this code to trigger an overlay:
<body onload="toggleOverlay();">
How do I delay this for a set time in milliseconds or seconds?
You can delay the execution of toggleOverlay() using setTimeout().
onload="setTimeout('toggleOverlay()', 1000);
When the page loads, the setTimeout is executed but not yet the toggleOverlay.
Related
I am using the ion-slides, and I get some events via:
(ionSlideDidChange)="onSlideChanged()"
I use this function to get the last slide:
onSlideChanged() {
this.lastSlide = this.slider.isEnd();
}
Than I use this.lastSlide in another directive [hidden] to show or hide some stuff in the next slide.
However there is a slight delay right after the next slide is shown, so after 1 second or less than one second the content is hidden as soon as slider reach to this last slide.
I have tried to use (ionSlideWillChange) instead (ionSlideDidChange) but I it has a delay still.
I have a component which renders a list of up to a thousand elements.
It takes 3/5 seconds to update the DOM, I mean after the component event componentDidUpdate, which is called after the changes have been flushed to the DOM, it takes 3/5 seconds to actually see the DOM updated.
I would like to show a spinning cog or something, but I don't know how, because I don't know how to get notified when the DOM updated is complete.
Anyone knows?
Javascript is single threaded, and all DOM operations are blocking. That means if the browser is busy adding to and updating the DOM, this will lock the Javascript thread until the DOM is updated. During the actual update, there's nothing you can do in code.
This is assuming the UI lockup is actually from a raw, very large amount of DOM manipulation, and not some other underlying culprit. #zerkms's comment is also accurate that animated gifs, CSS animations, etc, generally do not run while the browser is locked up performing large calculations.
If you anticipate browser lockup, the simplest solution is to show some spinner overlay, then run the command that updates your data. This way the spinner will already be in the DOM. When the update has completed, you can remove the spinner. It might look something like
render() {
return <div>
<div onClick={ this.performLongRunningAction }>click me</div>
{ this.state.spinnerVisible ? 'Loading' : null }
</div>
}
performLongRunningAction() {
// First show the spinner...
this.setState({ spinnerVisible: true }, () => {
// Then after state has been set and spinner rendered, start the
// long action
executeLongRunningActionNow();
});
}
// Then you need some mechanism to turn off the spinner state after the
// task has completed
componentWillReceiveProps( nextProps ) {
// Did a task execute? Turn off the spinner before the next render
if( nextProps.someCompletedFlag !== this.props.someCompletedFlag ) {
this.setState({ spinnerVisible: false });
}
}
Another solution is to break up the updating into chunks, so you update the DOM in intervals that are minimal enough not to lock up the Javascript thread. You have provided code, so fleshing out this solution is not possible.
I have a modal form that displays the progress of a lengthy operation. The operation is triggered when the Form's OnActivate Event is triggered.
procedure TMyForm.FormActivate(Sender:TObject);
begin
Start;
end;
The form has a cancel button with the ModalResult property set to mrCancel and the OnClick handler sets a flag that causes the operation to end.
procedure TMyForm.CancelButtonClick(Sender: TObject);
begin
FCancel := True;
end;
When I click the cancel button it stops the operation as expected but it fails to close the form. I suspect this is because the OnActivate handler is blocking the form from closing. A second click of the button does close the form. I've tried calling Close and sending a wm_close message but nothing seems to work. Does anyone have any suggestions to get the form to respond on the first click? Perhaps another event I can use instead of OnActivate?
I know moving the operation to a thread will be suggested. That's not a possibility at this point due to a large amount of poorly written legacy code.
In the following I am going to assume that Messages are probably processed by calls to Application.ProcessMessages inside the task.
Let's take a look at the code ShowModal that is pertinent:
SendMessage(Handle, CM_ACTIVATE, 0, 0);
ModalResult := 0;
repeat
Application.HandleMessage;
if Application.Terminated then ModalResult := mrCancel else
if ModalResult <> 0 then CloseModal;
until ModalResult <> 0;
The SendMessage call results in the OnActivate event firing. In your code that then starts the task and does not return until the task is complete. By which point you've assigned to ModalResult. But wait, the next line in the excerpt above sets ModalResult back to 0 and so your setting is lost. And so the modal message loop is entered and you need to assign to ModalResult again to get the form to close.
The bottom line here is that you cannot perform the task before entering the the modal message loop. One solution is to put the long running task in a separate thread. If you cannot bring yourself to do that you can post a message to the form in the OnActivate event handler. Respond to the event by starting the task. By this point the modal message loop will be running and setting ModalResult will close the form.
I use code below to add animation
animation.startProgress=fromPosition;
animation.endProgress=toPosition ;
Is it possible to get the event when animation reaches toPosition?
Welcome any comment
Have you thought of considering this?
animateWithDuration:animations:completion:
And adding the completion handler block.
I have function onClickButton where i do (pseudocode):
show activityIndicatorView (or ProgressBar or change label text no matter)
execute my algorithm
hide activityIndicatorView
actvitiyIndicatorView will never show. If I delete hide at the end of the function, then it will emerge after algorithm. In spite of I show it before execute algorithm.
Why and how I can fix it ?
Most probably your execute my algorithm is a long cpu time consuming process which is called on the main thread...
you are also showing the activity indicator just before the algorithm...The UI normally takes some time to update the layout (adding your activity indicator..) ..but before it does..your a;gorith takes place on the main thread..and it block the UI update.. so when the task completes.. you tell to hide activity..and your activity hides....that is why you can't see it being added and then removed from view..
To solve this..do the algorithm task in a separate thread(no the main thread) ..this way UI will be updated and task will complete in the background..
Alternative way is to perform the long task after some delay..so that UI update itself