文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Jquery循环中执行此函数5次

问如何在Jquery循环中执行此函数5次
EN

Stack Overflow用户

提问于 2016-06-04 05:46:39

回答 2查看 78关注 0票数 1

这个功能在于当我按空格键时改变我身体的背景，你可以看到如果身体在5秒后是黄色的，它就会变成蓝色，如果在5秒后是蓝色的，它就会变成红色。

我想让这个函数循环5次。

下面是我的代码：

$(document).ready(function() {
    $(document).keypress(function(e) {
        if (e.which == 32) {
            function changeColor() {
                if ($('body').hasClass('yellow')) {
                    $('body').removeClass('yellow');
                    $('body').addClass('blue');
                } else if ($('body').hasClass('blue')) {
                    $('body').removeClass('blue');
                    $('body').addClass('red');
                }
            }
        }
        setInterval(changeColor, 5000);
    });
});

javascript

jquery

回答 2

Stack Overflow用户

发布于 2016-06-04 05:53:24

您需要计算间隔的执行次数，一旦达到n的最大次数，就调用clearInterval。

为了避免使用全局变量，创建一个新的方法来调用间隔是最好的选择：

function setIntervalTimes(callback, milliseconds, times)
{
    var i=0;
    var interval = window.setInterval(function()
    {
       callback();

       if ( ++i === times ) {
           window.clearInterval(interval);
       }
    }, milliseconds);
}

现在您可以像这样调用setInvervalTimes()：

function changeColor() {
  // Your logic...
}

$(document).ready(function() {
  $(document).keypress(function(e) {
    if (e.which == 32) {
      // Perform your logic 5 times in 5 second intervals
      setIntervalTimes(function () {
        changeColor();
      }, 5000, 5);
    }
  });
});

票数 2

Stack Overflow用户

发布于 2016-06-04 05:50:36

您从间隔和函数中取出一个计数器，并使用它：

var times2toggle = 5;
var toggleColor = setInterval(changeColor, 5000);

function changeColor() {
    if( times2toggle--==0 ){ clearInterval( toggleColor ); }
    $('body').toggleClass('yellow blue');
}

我还将.toggleClass()添加到函数中。这做了你的代码所做的事情，但是更容易阅读。如果以黄色开头，切换类将关闭黄色，打开蓝色。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37623934

复制

相似问题

问如何在Jquery循环中执行此函数5次
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Jquery循环中执行此函数5次EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Jquery循环中执行此函数5次
EN