Prashant Mehta Prashant Mehta - 7 months ago 20
Javascript Question

setInterval function thread delay with other setInterval function is Jquery

I have two time interval variable in javascript witch execute with 1 sec and is 5 sec. and I give sleep in

myTimer1()
. In that condition current time function
myTimer()
is showing delay to display time on browser. actually it's jump in second. I want continuous second to display real time. If have any alternate way to display real time than it's greatly appreciated.
I'm facing this type of scenario in MVC based web application.

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<p id="demo1"></p>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}

var myVar1 = setInterval(function(){ myTimer1() }, 5000);

function myTimer1() {
document.getElementById("demo1").innerHTML = "Prashant";
//Calling some function from server side witch taking some time to calculated data to showing on browser and it will take some time to load like 2-3 sec. so I use sleep for example.
sleep(3000);
}

function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}

</script>

</body>
</html>


Thanks

Answer

Have you considered simply removing the sleep() call entirely? Calls like this can often cause incredibly poor performance and unexpected results (as it ties up your UI thread) :

function myTimer1() { 
    document.getElementById("demo1").innerHTML = "Prashant";
    // This is going to clog up your UI thread and prevent anything from occurring
    // sleep(3000);
}

Try removing it and you'll see that your timer runs continuously. If you still need to cause some type of delay, just use the setTimeout() function to handle that (and stopping your current timer).

Example Without sleep()

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<p id="demo1"></p>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

var myVar1 = setInterval(function(){ myTimer1() }, 5000);

function myTimer1() { 
document.getElementById("demo1").innerHTML = "Prashant";

}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

</script>

</body>
</html>

Regarding your Database Comment

If you are pulling users from a database, you should let the presumably AJAX calls handle when they are finished. If you wanted to pull a new user every 5 seconds, you could consider using an appraoch like this :

 // Keep track of how many users you have pulled
 var usersPulled = 0;

 // Every 5 seconds, pull a user
 var userTimer = setTimeout(function(){ pullUser(); }, 5000);

 function pullUser(){
      // Make an AJAX call to pull your specific user
      $.get('/Users/Get', { skip: usersPulled++ }, function(user){
          if(user)
          {
             // Get the user that was pulled and output them
             $('#userlist').append('<p>' + user + '</p>');
          }
          else
          {
             // No user was found, stop your timer
             clearTimeout(userTimer);
          }
     });
}

And then your server-side code might look something like the following to pull the "next" user in your database :

public string Get(int skip)
{
      // Get the first user available
      var user = _context.Users.OrderBy(u => u.Name).Skip(skip).FirstOrDefault();
      if(user != null)
      {
            return user.Name;
      }
      return null;
}
Comments