javascript - ClearInterval 无法正常工作

Question

我正在寻找一种方法来停止我的脚本进程。这是一个有 16 张图片的脚本，每五秒随机选择一张图片。如果您选择了该图片(通过下面的提交按钮)，则随机图片“选择器”需要停止。

一切正常，我找不到如何让 setInterval 停止，我正在使用clearInterval，但它不会“重置”计时器，也不会执行任何操作。即使我把clearInterval放在setInterval之后它也不会工作:-(

 function highlight() { 
var timerId = 0;
var $divs = $('.cell').removeClass('redborder');
var random = Math.floor(Math.random() * $divs.length);
$divs.eq(random).addClass('redborder');

$('#submit').show();

    $('#button').click(function() {
        $('p').empty();
        if($('#plaatje1').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 1</p>");
        }
        if($('#plaatje2').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 2</p>");
        }
        if($('#plaatje3').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 3</p>");
        }
        if($('#plaatje4').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 4</p>");
        }
        if($('#plaatje5').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 5</p>");
        }
        if($('#plaatje6').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 6</p>");
        }
        if($('#plaatje7').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 7</p>");
        }
        if($('#plaatje8').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 8</p>");
        }
        if($('#plaatje9').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 9</p>");
        }
        if($('#plaatje10').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 10</p>");
        }
        if($('#plaatje11').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 11</p>");
        }
        if($('#plaatje12').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 12</p>");
        }
        if($('#plaatje13').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 13</p>");
        }
        if($('#plaatje14').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 14</p>");
        }
        if($('#plaatje15').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 15</p>");
        }
        if($('#plaatje16').hasClass("redborder") == true)
        {
            $(".textarea").append("<p>Tekst 16</p>");
        }

    });
}
$('#submit').click(function(){
    clearInterval(timerId);
});
timerId = setInterval(function () {
  highlight();
}, 1000);

这是我的 JS/Jquery 部分。我认为 HTML 部分是不需要的，但是对于那些需要它的人来说:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="randompic.js"></script> <title>Versie 1</title> </head>   <div id="content">
            <h1>Random plaatjes</h1>
                <div class="pics">
                    <div class="heading">
                    Random plaatjes om de seconden
                    </div>
                    <div class="row">
                        <div class="cell" id="plaatje1">
                                Plaatje 1
                        </div>
                        <div class="cell" id="plaatje2">

                                Plaatje 2
                        </div>
                        <div class="cell" id="plaatje3">

                                Plaatje 3
                        </div>
                        <div class="cell" id="plaatje4">

                                Plaatje 4
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell" id="plaatje5">

                                Plaatje 5
                        </div>
                        <div class="cell" id="plaatje6">

                                Plaatje 6
                        </div>
                        <div class="cell" id="plaatje7">

                                Plaatje 7
                        </div>
                        <div class="cell" id="plaatje8">

                                Plaatje 8
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell" id="plaatje9">

                                Plaatje 9
                        </div>
                        <div class="cell" id="plaatje10">

                                Plaatje 10
                        </div>
                        <div class="cell" id="plaatje11">

                                Plaatje 11
                        </div>
                        <div class="cell" id="plaatje12">

                                Plaatje 12
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell" id="plaatje13">

                                Plaatje 13
                        </div>
                        <div class="cell" id="plaatje14">

                                Plaatje 14
                        </div>
                        <div class="cell" id="plaatje15">

                                Plaatje 15
                        </div>
                        <div class="cell" id="plaatje16">

                                Plaatje 16
                        </div>
                    </div>
                </div>
                <div class="textarea">
                </div>
                   <div id="submit" class="submit">
                   <button type="submit" id="button" name="submitt">Uitleg</button>
                   </div>

非常感谢您提前提供帮助!对于拼写错误和语法错误，我感到非常抱歉，英语不是我的母语。

Answer 1

所有的事件处理程序都写在突出显示函数中。将所有事件处理程序分开对我来说很有效。

 function highlight() {

     var timerId = 0;
     var $divs = $('.cell').removeClass('redborder');
     var random = Math.floor(Math.random() * $divs.length);

     $divs.eq(random).addClass('redborder');
     console.log($divs.eq(random));

     $('#submit').show();
 }
 $(document).ready(function () {
     $('#button').click(function () {
         $('p').empty();

         if ($('#plaatje1').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 1</p>");
         }
         if ($('#plaatje2').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 2</p>");
         }
         if ($('#plaatje3').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 3</p>");
         }
         if ($('#plaatje4').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 4</p>");
         }
         if ($('#plaatje5').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 5</p>");
         }
         if ($('#plaatje6').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 6</p>");
         }
         if ($('#plaatje7').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 7</p>");
         }
         if ($('#plaatje8').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 8</p>");
         }
         if ($('#plaatje9').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 9</p>");
         }
         if ($('#plaatje10').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 10</p>");
         }
         if ($('#plaatje11').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 11</p>");
         }
         if ($('#plaatje12').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 12</p>");
         }
         if ($('#plaatje13').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 13</p>");
         }
         if ($('#plaatje14').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 14</p>");
         }
         if ($('#plaatje15').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 15</p>");
         }
         if ($('#plaatje16').hasClass("redborder") == true) {
             $(".textarea").append("<p>Tekst 16</p>");
         }

     });

     $('#submit').click(function () {
         clearInterval(timerId);
     });
 });

 timerId = setInterval(function () {
     highlight();
 }, 1000);