Continuous Animation with jQuery, ajax and jsonp data

Question

I have created a JavaScript file that reads jsonp data using ajax request. I am adding the elements in a

tag and i am trying to add

elements to an animation that moves elements the left continually.

so i have: var url='https://www.example.com/json/list.json/?callback=jsonpCallBack';

 setInterval(function() {
    $.ajax({
        url : url, 
        dataType:'jsonp',       
        success: function(data)
        {
             var outputhtml='<ul>'; 
             var item = [];
              for(var i =0; i < data.length-1 ;i++)
              {

                var item = data[i];
                outputhtml+=  '<li>'+item.symbol + ' &nbsp' ;
                var changeValue=item.change;
                if(changeValue == 'd')
                {
                     outputhtml +='<span class="bid-value-down">' + item.BID+ '</span> &nbsp<span class="ask-value">(' +item.ASK+ ')</span> &nbsp<span class="down">   &nbsp</span> &nbsp&nbsp&nbsp| &nbsp&nbsp&nbsp</li>';
                }
                else
                {
                     outputhtml += '<span class="bid-value-up">' + item.BID+ '</span> &nbsp<span class="ask-value">(' +item.ASK+ ')</span> &nbsp<span class="up">  &nbsp </span> &nbsp&nbsp&nbsp| &nbsp&nbsp&nbsp</li>' ;
                }
              }
              outputhtml+="</ul>";
              $('.quotesbar-ticker').html(outputhtml) ;
              $('.quotesbar-ticker ul li').clone().appendTo('.quotesbar-ticker ul');
              doTicker();
        }

    }) 
    },52000 );
});`   {               }

as my main function. Inside my main function i have this call to doTicker();

function doTicker() 
  {
jQuery(document).ready(function($) { 
     $('.quotesbar-ticker').css('left',0).animate({'left': '-2500px' } , 20000 , 'linear');
 });

  }

What i want is to display values in a ticker form. But i have a proplem with my animate function and im stuck. Since the current functionality i have currently works as a ticker for a small amount of time and then it stops and starts again.

I dont want to use any fancy plugins since i want to keep my code as short as possible. Any help? I will appreciate. Thanks

Answer 1

You are currently trying to move it 2500px over a time period of 20000. It's stalling because that distance and time doesn't match how frequently your main function is updating.

If you change your doTicker function to the following it should be constant instead of stalling,

//setup variables to track timer
var t;
var timer_is_on = 0;

//function to start the timer and reset the ticker when it gets updated
function doTicker() 
{
    //if the timer is running, stop it and reset it.
    if(timer_is_on==1)
    {
        clearTimeout(t);
        timer_is_on = 0;
    }

    //set the ticker back to the start
    $('.quotesbar-ticker').css('left',0);

    //wait for the ticker to be loaded with the new data
    jQuery(document).ready(function($) { 
        //set a timer to repeat every 20 seconds
        t = setTimeout(runTicker(), 20000);
        timer_is_on = 1;
    });
}

//this function is run every 20 seconds
function runTicker()
{
    //don't set the ticker to the begining anymore, but do tell it to move left over 20 seconds
    $('.quotesbar-ticker').animate({'left': '-2500px' } , 20000 , 'linear');
}