使用jQuery单击按钮来停止动画

Question

I'm trying to pause the animation that I have running and I have no idea what I'm doing.

I also tried "function stop() { clearInterval(changer) }".

HTML and JQUERY below

```
    <div id="change"></div>
    <button id="stop">Stop</button>```

```
    $(function() {
    changer();
    });
    function changer() {
    var words = ["a", "b", "c", "d", "e", "f", "g", "h"];
    var idx = Math.floor(words.length * Math.random());
    $('#change').text(words[idx]);
    var time = Math.floor (100 * Math.random() + 75);
    setTimeout(changer, time);
    }

    function stop() {
        $("#change").stop(true);
        }```

JSFIDDLE: https://jsfiddle.net/magoo/a6kt8qmf/1/

Please help an idiot. Thank you in advance.

Answer 1

Add a variable that can act as an boolen 'stopIT', in this case setTimeout can't be called, when stop function han been called.

var stopIT = false;
function changer() {
   var words = ["a", "b", "c", "d", "e", "f", "g", "h"];
   var idx = Math.floor(words.length * Math.random());
   $('#change').text(words[idx]);
   var time = Math.floor (100 * Math.random() + 75);
   stopIT === false && setTimeout(changer, time);
}

function stop() {
    stopIT = true;
}