Javascript ClearInterval不是'；t工作不正常

我正在寻找一种方法来停止我的脚本进程的函数。这是一个有16张图片的脚本，每五秒钟随机选择一张图片。如果你选择了那张图片（通过下面的提交按钮），随机图片“choser”需要停止

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

函数高亮显示（）{
var-timerId=0；
var$divs=$（'.cell'）.removeClass（'redborder'）；
var random=Math.floor（Math.random（）*$divs.length）；
$divs.eq（随机）.addClass（'redborder'）；
$（“#提交”）.show（）；
$（“#按钮”）。单击（函数（）{
$（'p'）.empty（）；
if（$（'#plaatje1'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 1
”；
}
if（$（'#plaatje2'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 2
”；
}
if（$（'#plaatje3'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 3
”；
}
if（$（'#plaatje4'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 4
”；
}
if（$（'#plaatje5'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 5
”；
}
if（$（'#plaatje6'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 6
”；
}
if（$（'#plaatje7'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 7
”；
}
if（$（'#plaatje8'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 8
”；
}
if（$（'#plaatje9'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 9
”；
}
if（$（'#plaatje10'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 10
”；
}
if（$（'#plaatje11'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 11
”；
}
if（$（'#plaatje12'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 12
”；
}
if（$（'#plaatje13'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 13
”；
}
if（$（'#plaatje14'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 14
”；
}
if（$（'#plaatje15'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 15
”；
}
if（$（'#plaatje16'）.hasClass（“redborder”）==true）
{
$（“.textarea”）。追加（“Tekst 16
”；
}
});
}
$（“#提交”）。单击（函数（）{
清除间隔（timerId）；
});
timerId=setInterval（函数（）{
突出显示（）；
}, 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>

versie1
随机平板
随机二次规划
普拉杰1号
普拉杰2号
普拉杰3号
普拉杰4号
普拉杰5号
普拉杰6号
普拉杰7号
普拉杰8
普拉杰9
普拉杰10
普拉杰11
普拉杰12
普拉杰13
普拉杰14
普拉杰15
普拉杰16
后腿

---

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

您所有的事件处理程序都写在突出显示函数中。.将所有事件处理程序分开对我来说是个好办法

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

函数高亮显示（）{
var-timerId=0；
var$divs=$（'.cell'）.removeClass（'redborder'）；
var random=Math.floor（Math.random（）*$divs.length）；
$divs.eq（随机）.addClass（'redborder'）；
控制台日志（$divs.eq（随机））；
$（“#提交”）.show（）；
}
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（'p'）.empty（）；
if（$（'#plaatje1'）.hasClass（“redborder”）==true）{
$（“.textarea”）。追加（“Tekst 1
”；
}
if（$（'#plaatje2'）.hasClass（“redborder”）==true）{
$（“.textarea”）。追加（“Tekst 2
”；
}
if（$（'#plaatje3'）.hasClass（“redborder”）==true）{
 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);

timerId = setInterval()

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

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