jQuery向随机文本数组添加超时答案

【问题标题】：jQuery add timeout to random text arrayjQuery向随机文本数组添加超时
【发布时间】：2012-10-12 23:07:18
【问题描述】：

我有一个链接，每次点击它都会改变文本，但我正在尝试找到一种方法让它在一段时间后自动切换到下一个变量，有点像旋转器。

这就是我所拥有的：

    $(document).ready( function() {
    var quotes = [
        'Link 1',
        'Link 2',
        'Link 3',
        'Link 4',
        'Link 5',
        'Link 6'
    ];

    function loadQuote(i) {
        return quotes[i];
    }

    function randNumber() {
        return Math.floor( Math.random() * quotes.length );
    }
    $('#button-reload').click(function() {
            $(this).html(loadQuote(randNumber()));
    });
    $('#button-reload').html(loadQuote(randNumber()));
});

这是jsfiddle

有什么想法吗？

【问题讨论】：

+1 以获得良好的问题格式。
大量练习哈哈 ;)

标签： jquery timeout

【解决方案1】：

$(document).ready( function() {
    var quotes = [
        'Link 1',
        'Link 2',
        'Link 3',
        'Link 4',
        'Link 5',
        'Link 6'
    ];

    var $theLink = $('#button-reload');

    function loadQuote(i) {
        return quotes[i];
    }

    function randNumber() {
        return Math.floor( Math.random() * quotes.length );
    }

    function changeTheQuote() {
        $theLink.html(loadQuote(randNumber())); 
    }

    var interval = window.setInterval(function(){
        changeTheQuote();
    }, 3000); 

    $theLink.click(function() {
        window.clearInterval(interval);
        changeTheQuote();
        interval = window.setInterval(function(){
            changeTheQuote();
        }, 3000); 
    });
});

【讨论】：

Habibillah 回答的编辑版本
页面第一次加载时似乎需要一秒钟才能显示出来，这是因为延迟吗？
@JB。是的，这是因为它最初的结构。你从来没有直接设置链接的内容，你只是用交换功能做的。您可以在 HTML <a href="#" id="button-reload">Link 1</a> 中设置一个初始值，或者您可以在关闭 }); 之前立即添加对 changeTheQuote(); 的调用

【解决方案2】：

尝试使用window.setInterval() 如下代码：

$(document).ready( function() {
    var quotes = [
        'Link 1',
        'Link 2',
        'Link 3',
        'Link 4',
        'Link 5',
        'Link 6'
    ];

    function loadQuote(i) {
        return quotes[i];
    }

    function randNumber() {
        return Math.floor( Math.random() * quotes.length );
    }

    var interval = window.setInterval(function(){
        $('#button-reload').html(loadQuote(randNumber()));            
    }, 3000);   

    $('#button-reload').click(function() {
        $(this).html(loadQuote(randNumber()));

        //uncomment line bellow to stop intarval when button clicked.
        //window.clearInterval(interval);
    });  
});

【讨论】：

我会将代码放入一个函数中，这样就可以在页面加载后立即调用它，也可以在间隔内调用它......
我同意 elclanrs，我也会将 window.clearInterval(interval) 添加到点击处理程序中，然后在重新加载报价后重新启动间隔。这样可以避免在手动切换后立即切换引号。
elclanrs，我将内联代码放在 window.interval 中，因为它只有一行。我很清楚将代码分成一个函数，然后由 window.interval 调用。 @JamesSwift，我将注释代码移到 .click() 事件中。
@JB。我发布了编辑后的代码作为答案，不要投票，这只是 Habibillah 的编辑