Question

我一直在尝试在jQuery中创建一个简单的单词序列显示程序。我想实现一个简单的程序，可以将句子作为输入，其输出可以按字序列显示。

现在我该如何让这个程序按顺序显示这些单词，如下所示

 <div class="bar">One Two </div>  //(hide it after few seconds and show next line)
 <div class="bar">Three Four </div> //(hide it after few seconds and show next line)
 <div class="bar">Five Six </div> //(hide it after few seconds and show next line)
 <div class="bar">Seven </div> //(hide it after few seconds)

可以使用程序中的wordCount var配置按顺序一次显示的单词数

My Program at JSFiddle

我已经尝试了很多选项，它总是在div中显示最后一个单词“Seven”。动画似乎可以正常工作，这让我觉得它与JS处理动画延迟的方式有关。

我想这可以追溯到对一些事情的清晰理解不确定JavaScript是如何处理延迟的。

我试过以下但没有奏效 - setTimeout - 延迟调用函数 - jQuery.delay（）调用

当我输入console.log消息时，它确实按顺序显示了所有单词但是div总是包含最后一个单词。

我猜JavaScript不是在等待动画完成，最后一个词太快到达，动画会在以后继续。

我想要查看的主要代码是

    $('.bar').fadeIn(1000).text(displayWords).fadeOut(1000);

对此的任何帮助和见解将不胜感激。

Answer 1

使用setInterval，

尝试以下版本

var words = $('.foo').text().split(' ');
var index = 0;
var wordCount = 3;

var showHide = setInterval(function () {
    var displayWords = "";

    var mx = index + wordCount;
    if (mx > words.length) mx = words.length;
    for (var i = index; i < mx; i++) {
        displayWords += words[i] + " ";
    }

    $('.bar').fadeIn(1000).text(displayWords).fadeOut(1000);
    index = mx;
    if (index > words.length) clearInterval(showHide);    
}, 2000);

DEMO： http://jsfiddle.net/9T4HE/15/

Answer 2

看一下jQuery.queue（）...

http://api.jquery.com/queue/

这是以上网址的代码：

var div = $("div");
function runIt() {
    div.show("slow");
    div.animate({left:'+=200'},2000);
    div.slideToggle(1000);
    div.slideToggle("fast");
    div.animate({left:'-=200'},1500);
    div.hide("slow");
    div.show(1200);
    div.slideUp("normal", runIt);
}
function showIt() {
    var n = div.queue("fx");
    $("span").text( n.length );
    setTimeout(showIt, 100);
}
runIt();
showIt();

runIt（）方法将动画添加到队列中，showIt方法以超时方式调用队列。

上面的URL还显示了连续运行的各种动画的演示。

HTH

麻烦在JQuery和JavaScript中显示序列中的单词

2 个答案: