ClearInterval無法正常工作

Question

我正在尋找一種功能來停止腳本進程。 它是關於一個具有16張圖片的腳本，每五秒鍾選擇一次隨機圖片。 如果您選擇了該圖片（通過下面的提交按鈕），則需要停止隨機圖片“選擇器”。

一切正常，我找不到停止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

您所有的事件處理程序都寫在highlight函數內。

 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並且該變量從未在函數突出顯示中使用。 在函數末尾，變量“死”。

您還創建了另一個變量

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 var timerId