jQuery循环停止按钮

Question

我目前正在设置两个按钮，分别在html5上启动和停止jquery循环。 “开始”按钮可以正常工作，但是无论我如何尝试，“停止”按钮都不会激活。 我已经看到了许多有关停止循环的示例，但似乎都无法解决按钮无响应的问题。 抱歉，这是一个简单的问题，但是作为一名学生，我很沮丧，因此提出了要求。 干杯

"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个问题。 在next_button.click(function(){ ... });外部看next_button.click(function(){ ... }); 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);
    });
});

另外，也不必在ne​​xtButton函数中声明函数myCode ，因此我也为您清除了它