setInterval,全局范围:运行setInterval一次点击

setInterval & the global scope: Running setInterval once on click

本文关键字：setInterval 一次 全局 范围 运行      更新时间：2023-09-26

当用户登陆我的主页时，我使用setInterval在一些类中循环，以获得视觉效果:

    var toggleSlide = setInterval( function() {
      $('#cs-main nav li.cycle').removeClass("cycle" || " ").next().last().addClass("cycle");
},600);

我希望这个效果只在用户点击启动页面时运行一次，并且网站是通过ajax加载的:

    $("#splash").live('click', function () {
        $(this).fadeOut('slow', function () {
            $('#main').load('client.html', function () {
            }).fadeIn();
            var toggleSlide = setInterval( function() {
      $('#cs-main nav li.cycle').removeClass("cycle" || " ").next().last().addClass("cycle");
},600);
        });
        return false;
    });

我遇到的问题是(我假设)，因为setInterval在全局范围内运行，任何时候#cs-main nav li.cycle出现在页面上，setInterval做它的事情。这是有问题的，因为这个类出现在我的子页面上，而我的意图只是让它在用户单击#splash时运行一次。

使用clearInterval()杀死计时器一旦你完成它…

试试下面的

$("#splash").live('click', function () {
    $(this).fadeOut('slow', function () {
        var toggleSlide = setInterval( function() {
            $('#cs-main nav li.cycle').removeClass("cycle" || " ").next().last().addClass("cycle");
        },600);
        $('#main').load('client.html', function () {
        }).fadeIn('slow', function(){
            clearInterval(toggleSlide);
        });

    });
    return false;
});
相关文章：