jquery - 使用 jQuery、ajax 和 jsonp 数据的连续动画

Question

我创建了一个使用 ajax 请求读取 jsonp 数据的 JavaScript 文件。我正在添加元素

标签，我正在尝试添加

元素到一个不断向左移动元素的动画。

所以我有： 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 );
});`   {               }

作为我的主要功能。在我的主函数中，我调用了 doTicker();

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

  }

我想要的是以股票形式显示值。但是我的动画功能有问题，我被卡住了。由于我当前的功能目前在一小段时间内用作自动收报机，然后它会停止并再次启动。

我不想使用任何花哨的插件，因为我想让我的代码尽可能短。有什么帮助吗？我会感激的。谢谢

Answer 1

您目前正尝试在 20000 的时间段内将其移动 2500 像素。它正在停止，因为该距离和时间与您的主要功能更新的频率不匹配。

如果您将 doTicker 函数更改为以下内容，它应该是常量而不是停滞，

//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');
}