jQuery change text after a certain amount of time-CodePudding

I have a C# MVC application that presents the user with a login page. When the user clicks the submit button, I execute a jQuery to show a previously hidden <div> with a spinning circle and the text that says Please wait while we log you in.... Then the jQuery submits the form to a controller of my application where the login process starts.

The login process involves accumulating a lot of data across multiple databases so it can take up to 10-15 seconds, depending on the device used to log in.

Is there a way to have the text that is displayed change from Please wait while we log you in... to something like Sorry for the delay but we are working on it... after 10 seconds? This way, the text changes so the user doesnt think they are hung up.

Thanks.

CodePudding user response：

You could use setTimeout() to update the text after 10 seconds :

function login() {
  $("#wait-message").show();
  setTimeout(() => $("#wait-message").text("Sorry for the delay but we are working on it..."), 10000);
}

#wait-message {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="login()">log in</button>
<div id="wait-message">Please wait while we log you in...</div>

CodePudding user response：

Using a setInterval we can produce something

You can change time from 1s to 10s

$(function(){

  var text = setInterval(function(){
      var r = (Math.random()   1).toString(36).substring(7);
      $('.text').text(r);
  },1000);// 1sec

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div >1234</div>