每 5 秒连续调用一次 Javascript 函数[重复]

Question

可能重复：
每 60 秒调用一个函数

我想连续每 5 秒调用一次 Javascript 函数。 我看到了 setTimeOut 事件。如果我想要连续使用它会正常工作吗？

Answer 1

可以使用

setInterval()

，参数是一样的。

const interval = setInterval(function() {
   // method to be executed;
 }, 5000);

clearInterval(interval); // thanks @Luca D'Amico

Answer 2

对你的函数进行“递归”

setTimeout

，它将在定义的每个时间量内继续执行：

function yourFunction(){
    // do whatever you like here

    setTimeout(yourFunction, 5000);
}

yourFunction();

Answer 3

正如最佳编码实践建议的那样，使用

setTimeout

而不是

setInterval

。

function foo() {

    // your function code here

    setTimeout(foo, 5000);
}

foo();

请注意，这不是递归函数。该函数在结束之前不会调用自身，而是调用一个

setTimeout

函数，该函数稍后将再次调用相同的函数。

Answer 4

为了将来重复某个操作，您可以使用内置的

setInterval

函数来代替

setTimeout

。
它具有相似的签名，因此从一个到另一个的转换很简单：

setInterval(function() {
    // do stuff
}, duration);

Answer 5

很好的工作示例这里

/*!  MenuAutoActive
---------------------------------------------*/
(function($) {

    $.fn.NoticeBoard = function() {


        // Set a timeout
        var timeOut = setTimeout(nextNotice, 5000);

        // pause on hover
        $('.noticeboard').hover(

        function() {
            clearTimeout(timeOut);
        }, function() {
            timeOut = setTimeout(nextNotice, 5000);
        });

        // Next notice function called on timeout or click
        //set a flag that use to be an oberver to listen when the fadeIn done
        var flag = true;
        function nextNotice(event) {
            if(!flag){
                return false;
            }
            clearTimeout(timeOut);
            
            flag = false;
            timeOut = setTimeout(nextNotice, 5000);

            if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) {
                $('.noticeboard span:visible').fadeOut(300);
                $('.noticeboard span:first-child').fadeIn("slow",function(){
                    flag = true;
                });
            }
            else {
                $('.noticeboard span:visible').fadeOut(300).next().fadeIn("slow",function(){
                    flag = true;
                });
            }
            return false;
        }

        $('#notice-next').click(nextNotice);
        $('#notice-prev').click(function(event) {
            
            if(!flag){
                return false;
            }
            clearTimeout(timeOut);
            
            flag = false;
            timeOut = setTimeout(nextNotice, 5000);


            if ($('.noticeboard span:visible').is('.noticeboard span:first-child')) {
                $('.noticeboard span:visible').fadeOut(300);
                $('.noticeboard span:last-child').fadeIn("slow",function(){
                    flag = true;
                });
            }
            else {
                 $('.noticeboard span:visible').fadeOut(300).prev().fadeIn("slow",function(){
                    flag = true;
                });
            }
            return false;

        });

    };

/*!  
---------------------------------------------*/

})(jQuery);

/*!  OnLoad
---------------------------------------------*/
$(document).ready(function() {

    $('.noticeboard span').hide();
    $('.noticeboard span:first').show();
    $('.noticeboard').NoticeBoard();

});

/* NOTICE BOARD */
.noticeboard { position: relative; min-height: 150px;}
.noticeboard span { display: none; position: absolute; top: 0px; left: 0px;}
.noticeboard strong { padding-right: 30px; display: block;}
#notice-next { position: absolute; top: 50px; right: 10px; z-index: 100;}
#notice-prev { position: absolute; top: 50px; right: 30px; z-index: 100;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="action-box">
    <!-- NOTICEBOARD NAV -->
    <a href="#" id="notice-prev">«</a>
    <a href="#" id="notice-next">»</a>
    <!-- /NOTICEBOARD NAV -->
    
    <span class="ge"></span>
    <div class="noticeboard" style="height: 145px;">
        
        <span style="display: block;"><strong>Boy, 14, found stabbed to death</strong><a href="http://www.bbc.co.uk/news/uk-england-14570107">A 14-year-old boy has been found stabbed to death in a park in north London.</a></span><span style="display: block;"><strong>A-level passes rise for 29th year</strong><a href="http://www.bbc.co.uk/news/education-14558490">Hundreds of thousands of teenagers are getting their A-level results amid an intense battle for university places ahead of tuition fee rises.</a></span><span style="display: none;"><strong>UK: Matter of time for Gaddafi</strong><a href="http://www.bbc.co.uk/news/uk-politics-14625484">Deputy Prime Minister Nick Clegg has said it is "only a matter of time" before Col Muammar Gaddafi is defeated.</a></span>                </div>
</div>

加：

• 有很好的

  fade in / fade out

  动画
• 将暂停于

  :hover

• 将阻止运行多个动作（在开始第二个动作之前完成运行动画）
• 将防止在选项卡中损坏（浏览器停止选项卡中的脚本）

已测试并工作！