首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >JavaScript setInterval将仅运行jQuery一次

JavaScript setInterval将仅运行jQuery一次
EN

Stack Overflow用户
提问于 2012-10-23 03:47:25
回答 2查看 907关注 0票数 0

这里我有一把小提琴:http://jsfiddle.net/justinboyd101/4nrbb/

这是我的问题:

为什么我的console.log函数和将html添加到div的语句可以工作,而不是在其他循环jQuery函数上运行?

有关更多详细信息,请阅读以下内容:

我正在尝试使用setInterval创建一个新闻报价器。动画应该是从屏幕的右侧滑入文本,然后将内容向下推,然后重置回其原始位置。由于某些原因,它只会运行一次动画。我设置了一个简单的函数,每次间隔都会从数组中收集信息,并将其添加到一个空的div中。

如果你不想使用jsfiddle,下面是我的代码:

HTML

代码语言:javascript
运行
复制
<div id="newsValueText" class="newsValueText floatLeft darkBlue">
    <ul id="newsTicker" class="newsTicker">
        <li name="tick" ph="tick1">We have in-store technical support.</li>
        <li name="tick" ph="tick2">Option 2</li>
        <li name="tick" ph="tick3">Option 3</li>
        <li name="tick" ph="tick4">Option 4</li>
        <li name="tick" ph="tick5">Option 5</li>
        <li name="tick" ph="tick6">Option 6</li>
    </ul>
</div>
<div id="log"></div>

JS

代码语言:javascript
运行
复制
//Get the ticker elements
var tickText = document.getElementById('newsTicker').getElementsByTagName('li');
var tickNum = tickText.length;
//New Array to clear empty data
var tickArry = [];
//Loop through list items and add non-void data to new loop
for(var a = 0; a < tickNum; a++) {
    if ($(tickText[a]).html() != '') {
        tickArry.push($(tickText[a]));
    }
}
//Loop int
var i = 0;
var log = document.getElementById('log');
//Self-invoking function for ticker animation
function animTick() {
    console.log($(tickArry[i]));
    log.innerHTML += $(tickArry[i]).html();
    //Make current tick item fall down
        $(tickArry[i]).animate({'padding-top' : '+=50px'}, 500,
            function() {
                //Once tick item is off screen, reset values
                $(this).css({'margin-left' : '9999px', 'padding-top' : '0'});
            });
        //Increment item
        i++;
        //If the tick has reach its length then reset
        if (i === tickNum) {
            i = 0;
        //Else call the animation for the next tick
        }
    }
    //Immediately animate in first list item
    $(tickArry[i]).animate({'margin-left' : '0px'}, 2000);
    //Add a delay
    setInterval(animTick, 3000);
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-10-23 04:11:38

如果在animTick函数中包含$(tickArry[i]).animate({'margin-left' : '0px'}, 2000);会怎样呢?

演示:Fiddle

票数 0
EN

Stack Overflow用户

发布于 2012-10-23 03:58:32

如果要递归调用相同的函数,请使用setTimeout()

您的setInterval()替代方案将是:

代码语言:javascript
运行
复制
function animTick() {
    // Function definition
}

setInterval(animTick, 3000);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13018683

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档