ClearInterval无法正常工作

Question

我正在寻找一种停止脚本进程的方法。它是关于一个有16张图片的脚本，每隔5秒选择一张随机图片。如果你选择那张照片（通过下面的提交按钮），随机照片'choser'需要停止。

一切正常，我找不到如何使setInterval停止，我正在使用clearInterval但它不会'重置'计时器也不会做任何事情。即使我在setInterval之后放了clearInterval它也行不通： - （

 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);

Answer 2

除了您的实际问题，您还有严重的范围问题。

在突出显示中，您声明了var timerId，并且此变量从未在函数突出显示中使用。在函数结束时，变量＆＃34; die＆＃34;。

您还使用

创建了另一个变量

timerId = setInterval()

但这次它是一个全局范围变量（因为你没有把var放在前面）。这个timerId与你的高亮显示的timerId不同。

在clearInterval(timerId);中，调用的是全局范围timerId。

您的代码应该正常工作，除非您没有显示所有的javascript并且还有其他一些范围冲突。

您现在应该将所有代码放在

中

$(document).ready(function () {
    var timerId;

    //All your code with jquery hasClass/append
    $('#submit').click(function () {
        clearInterval(timerId);
    });
    timerId = setInterval(function () {
        highlight();
    }, 1000);
});

除了function highlight()。并声明var timerId 在此处详细了解范围：http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/