Question

I display a loading spinner to reload a custom pdf reader (in html 5) after each rotation of the device. It works well on an android device and when i simulate a rotation on desktop device, but on the iPad, I cannot see the spinner, it’s as if the actions showing the spinner / reloading the pdf reader/ hiding the spinner are executed at a “one shot”.
I’ve tried to delay the pdf reloading until the spinner is shown but it’s the same thing.
Here is the sequence of actions :

window.onorientationchange = function() {
           launchSpinnerThenRotate();
}

function launchSpinnerThenRotate(){
    alert(" i'll launchSpinnerThenRotate");
    showSpinner();
    setTimeout(rotatePdfReader(),1000);
}

I’ve tried both js and jquery functions to show / hide spinner always with the same effect

function showSpinner(){
    //$('#pdfReaderSpinner').css("visibility" , "visible");
    document.getElementById('pdfReaderSpinner').style.visibility = "visible";
    document.getElementById('pdfReaderSpinner').style.zIndex = 100000000;
}

I don’t think that the problem is in spinner, I can show it correctly at the first launching of the page, but I had to show the spinner in the document.ready function :

$(document).ready(function() { 
    var target = document.getElementById('loadingSpinner');
    spinner = new Spinner({top: 0, left: 0,color:'red'}).spin(target);
    showSpinner();
});

$(window).load(function(){
    initPdfReader();
    hideSpinner();
});

Answer 1

Change this line:

setTimeout(rotatePdfReader(),1000);

to this:

setTimeout(rotatePdfReader,1000);

You want to pass the reference to the function to setTimeout so it can be called in 1 second. Currently you are passing the result of the function to setTimeout.