如何为Jquery文本显示添加延迟

时间:2014-04-12 14:41:07

标签: jquery timer

我在这里对这个问题进行了彻底的研究,没有任何答案对我有用。我在屏幕上的同一个确切位置一次显示一本书中的文字。我试图让循环延迟x毫秒,但这些单词会立即显示。如此之快,用户只能看到句子中的最后一个单词。

没有任何内容,setTimeoutsetInterval,等待ajaxComplete等,会减慢文字的显示速度。

即使我使用ajaxComplete并将单词从Ajax中循环出来,setTimeoutsetInterval也不会减慢单词的显示速度。很沮丧。提前感谢您的帮助!

需要保持ajax异步 - 因为有按钮供用户暂停,跳过等等。

function showWord(){
    $('#thedata').html(word);
}

function getThisSentence(){
    var sentence;
    var x;
    var str = '';

    var surl = "how-data.php?choice=1&book_id=7&chap_num=1&sent_num=1";
        x = 0;                                          
        $.ajax({
            cache:false,
            async:true,
            url:surl,   
            dataType:"json",
            success: function(data){
                words = data.words.split(' ');
                $.each(words,function() {
                    var time = 1500;
                    word = words[x];
                    temp - word;
                    setTimeout( function(){ showWord() }, time)
                        time += 1500;

                    x++;
                });

            } 
        });

}

2 个答案:

答案 0 :(得分:0)

将超时与索引相乘以获得交错延迟,这应该是您所需要的全部

function getThisSentence(){
    $.ajax({
        url      : "how-data.php?choice=1&book_id=7&chap_num=1&sent_num=1",   
        dataType : "json",
        success  : function(data){
            $.each(data.words.split(' '), function(index, word) {
                setTimeout(function(){  
                    $('#thedata').html(word);
                }, 1500*index);
            });
        } 
    });
}

答案 1 :(得分:0)

使用setInterval可以设置一个每1500ms运行一次的函数:

success: function (data) {
    words = data.words.split(' ');
    var i = 0;
    var myVar = setInterval(function () {
        showWord(i++);
        if (i >= words.length) {
            clearInterval(myVar);
        }
    }, 1500);    
}