How to invoke javascript function every 3.5 seconds?

Question

here in drop function i am calling the show div after each value is iterated from array.the showdiv function sets the div to display:block; and shows the data inside it.in show div function i am trying to hide the div every 3.5 seconds after it has been shown and when again the next iteration is done it is not showing the div again, for only first time it shows the div for some times and it will hide the div. and again when it calls the showdiv function it is not showing the div.

i want to show div and after 3.5 seconds i want to hide div.how can i do this?

function drop() {
  clearMarkers();
  for (var i = 0; i < locations.length; i++) {
    var city = locations[i][0];
    var pro_cat = locations[i][1];
    var marker_icon = locations[i][3];
    var product_image = locations[i][4];
    var marker_src = 
    addMarkerWithTimeout(locations[i][2], i * 500, marker_icon);  
    //alert("dropped");
    getCity(city,pro_cat, i * 500);
    if(product_image == null)
    {
        //if image found in row-do nothing
    }
    else {
      //if image found 
      showdiv(city,product_image, i * 500);
      /*window.setTimeout(function() {
         hidediv();
      },2500);*/
    }
  }
}



function showdiv(city, imagesrc, timeout)
{
  window.setTimeout(function() {
  document.getElementById('city-order').innerHTML = "";
  document.getElementById('order-product').innerHTML = "";
  $('.product-display').addClass("zoomin");  
  //document.getElementById('product-view-display').style.display = "block";  
  document.getElementById('product-list-display').style.display = "block";
  var order_placed_city = document.getElementById('city-order');
  var content = document.createTextNode(city);
  order_placed_city.appendChild(content);
  var product_order = document.getElementById('order-product');
  var elem = document.createElement("img");
  product_order.appendChild(elem);
  elem.src = imagesrc;
  },timeout);  
   window.setTimeout(function() { 
      document.getElementById('product-view-display').style.display = "none";  
   },3500);
}

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

setInterval(function(){
    $('.product-view-display').toggle(); },
3500);

Use setInterval instead. Timeout calls the function once. Interval will keep calling the function after the specified period of time (milliseconds).

If you need to eventually stop this, see: Stop setInterval call in JavaScript

More on jQuery toggle: http://api.jquery.com/toggle/

edited May 23 '17 at 12:22

Community

1
1

answered Jun 29 '15 at 13:02

1

Why they elaborate `!$('.product-view-display').is(':visible')`? `$('.product-view-display').toggle()` will do the same thing – iCollect.it Ltd Jun 29 '15 at 13:05
@TrueBlueAussie - well caught. Will edit answer now, don't know why I done that! – Jun 29 '15 at 13:06

score 1 · Answer 2 · answered Jun 29 '15 at 13:19

The problem with your code is that you schedule the showing, and at the same time schedule the hiding. This means that depending on the given time-out, the showing will be immediately undone by the hiding.

You should be scheduling the next step in the callback of the setTimeout.

So what you would rather do is something like:

function scheduleShowDiv(city, imageSrc, timeout) {
  window.setTimeout(function() { showDiv(city, imageSrc, timeout) }, timeout)
}

function showDiv(city, imageSrc,timeout) {
  /* do whatever you need to show the div */
  window.setTimeout(function() {
    document.getElementById('product-view-display').style.display = "none";
    scheduleShowDiv(city, imageSrc, timeout);
  }, timeout);
}

An alternative would be to use setInterval and check the presence of the div to decide whether you want to show and update the contents, or just hide it.

score 0 · Answer 3 · answered Jun 29 '15 at 13:03

0

just use below javascript method that sets the interval of 3.5 sec

setInterval(function () {
  // write here code that you want to execute.....
}, 3500);

answered Jun 29 '15 at 13:03

Himesh Aadeshara

2,114
16
26

This doesn't answer the question. The bit you did include, I'd already written. – Jun 29 '15 at 13:05

How to invoke javascript function every 3.5 seconds?

3 Answers3