CODEWITHSUNDEEP
javascriptjquerycss
VPY
VPY

Reputation: 463

jquery : Change background color when the function is started and completed

In my webpage I have a function submitFileUpload() that gets called when button aws-upload-submit is clicked as can be seen from the below code.

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
$(function() {
  submitFileUpload();
})

function submitFileUpload() {
  $('#aws-upload-submit').click(function() {
    //start displaying spinner here   
    //   $("*").css("background-color","yellow");                                                            
    loadfiles(); //around 1 min - 2 min of synchronous processing                                                               
    // $("*").css("background-color","green"); 
    //stop displaying spinner here
  })
}
  </script>
</head>

<body>
  <button type="button" id="aws-upload-submit">Submit</button>
</body>
</html>

Ideally I would like to display a spinner that will be shown when the function begins and will be hidden when the function exits.

Instead of spinner I thought of atleast changing the css background color property..i.e change the background color to yellow during function beginning and at the end change the background color to green after the function has completed.

When the function ran though, it just displayed green..

Most of the posts I looked up online were with respect to ajax but in my case submitFileUpload() is not an ajax function.

Is there a way to change the background color between the function start and end ?

Upvotes: 1

Views: 129

Answers (1)

Saint Alex
Saint Alex

Reputation: 11

Did you can use interval? 

If(loadFiles()){
setInterval(Function("changeYellow();"), 60000);
}

Or try to use callback of function.

Upvotes: 1

Related Questions