带有jQuery，ajax和jsonp数据的连续动画 [英] Continuous Animation with jQuery, ajax and jsonp data

问题描述

我创建了一个JavaScript文件，该文件使用ajax请求读取jsonp数据.我要在

标记中添加元素，并且尝试将

元素添加到动画中，该动画会不断向左移动元素.

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.

所以我有: var url='https://www.example.com/json/list.json/?callback=jsonpCallBack';

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 );
});`   {               }

作为我的主要功能.在我的主要函数中，我有对doTicker()的调用；

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

推荐答案

您当前正在尝试在20000的时间范围内将其移动2500px.由于该距离和时间与您的主要功能更新的频率不匹配，因此该方法一直处于停滞状态

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.

如果将doTicker函数更改为以下函数，则它应该是常量而不是停顿，

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

这篇关于带有jQuery，ajax和jsonp数据的连续动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！