Question

我正在设置两个按钮，启动和停止html5上的jquery循环。开始按钮完美无缺，但无论我尝试什么，停止＆＃39;按钮保持不活动状我已经看到很多关于停止循环的例子，但似乎没有解决按钮没有响应的问题。对不起，如果这是一个如此简单的问题，但作为一名学生，我很沮丧，因此要求。欢呼声

"use strict";

var current_banner_num = 1;

$(document).ready(function(){

    $("#banner-base").css("visibility","hidden"); 
    $("#banner-"+current_banner_num).show();

    var next_button = $("#start").button();
    var stop_button = $("#stop").button();

        next_button.click(function(){
            var timer = setInterval(myCode, 2000);
            function myCode() {

                //$("#banner-"+current_banner_num).hide();
                $("#banner-"+current_banner_num).fadeTo(800, 0);

                if (current_banner_num == 4) {
                    current_banner_num = 1;
                }
                else {
                    current_banner_num++;
                }
                $("#banner-"+current_banner_num).fadeTo(800, 1);
            }
        });
        stop_button.click(function(){
            function abortTimer(){
            clearInterval(timer);
        }
    });
});

Answer 1

您只是在这里一次又一次地定义一个函数。只是摆脱事件处理程序中的函数：

stop_button.click(function(){
  clearInterval(timer);
});

这会执行clearInterval()，而原始问题中的代码只是定义了一个函数，但不会像你说的那样调用或执行任何操作。希望它得到解决。

Answer 2

使用全局变量而不是本地变量，打开clearInterval函数

"use strict";

var current_banner_num = 1;

$(document).ready(function(){

    $("#banner-base").css("visibility","hidden"); 
    $("#banner-"+current_banner_num).show();

    var next_button = $("#start").button();
    var stop_button = $("#stop").button();
     var timer = null;
        next_button.click(function(){
            timer = setInterval(myCode, 2000);
            function myCode() {

                //$("#banner-"+current_banner_num).hide();
                $("#banner-"+current_banner_num).fadeTo(800, 0);

                if (current_banner_num == 4) {
                    current_banner_num = 1;
                }
                else {
                    current_banner_num++;
                }
                $("#banner-"+current_banner_num).fadeTo(800, 1);
            }
        });
        stop_button.click(function(){
            clearInterval(timer);
    });
});

Answer 3

我认为您的代码中存在2个问题。 timer变量在next_button.click(function(){ ... });之外是不可见的，因为它对于此函数是本地的，因此您需要使它变得有点全局;第二个问题是在stop_button.click(function(){ ... });中你只是声明函数abortTimer但不调用它（通常，没有必要声明该函数）。我认为你的代码应该是：

"use strict";

var current_banner_num = 1;

$(document).ready(function(){

$("#banner-base").css("visibility","hidden"); 
$("#banner-"+current_banner_num).show();

var next_button = $("#start").button();
var stop_button = $("#stop").button();
    var timer = null;
    next_button.click(function(){
        timer = setInterval(function(){
            //$("#banner-"+current_banner_num).hide();
            $("#banner-"+current_banner_num).fadeTo(800, 0);

            if (current_banner_num == 4) {
                current_banner_num = 1;
            }
            else {
                current_banner_num++;
            }
            $("#banner-"+current_banner_num).fadeTo(800, 1);
        }, 2000);
    });

    stop_button.click(function(){
        clearInterval(timer);
    });
});

也没有必要在nextButton函数中声明函数myCode，所以我也为你清除它

Jquery循环停止按钮

3 个答案: