title: How to stop Jquery function from running?
body: <p>Newbie here. Probably because I'm already sleepy and can't find a solution. I'm trying to stop a function when I click on another button.
  Here's the code so far:</p>
  
  <p>When I click on a button (.start), it runs a function that messes up the text randomly without finish. But then, I want to click on button #stop and stop that specific function from running. I've tried toggles, preventDefault, event.stopPropagation(), setInterval, etc... None of them works. I've tried putting inside my function and outside as well.</p>
  
  <p>Here's the current js code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".start").click(function(){
      var getTextNodesIn = function(el) {
      // Look at all the page elements and returns the text nodes
      return $(el)
        .find(":not(iframe,script)")
        .addBack()
        .contents()
        .filter(function() {
          return this.nodeType == 3; // Text node types are type 3
        });
    };
  
    // var textNodes = getTextNodesIn($("p, h1, h2, h3","*"));
    var textNodes = getTextNodesIn($("p"));
  
    function isLetter(char) {
      return /^[\d]$/.test(char);
    }
  
    var wordsInTextNodes = [];
    for (var i = 0; i &lt; textNodes.length; i++) {
      var node = textNodes[i];
  
      var words = [];
  
      var re = /\w+/g;
      var match;
      while ((match = re.exec(node.nodeValue)) != null) {
        var word = match[0];
        var position = match.index;
  
        words.push({
          length: word.length,
          position: position
        });
      }
  
      wordsInTextNodes[i] = words;
    }
  
    function messUpWords() {
      for (var i = 0; i &lt; textNodes.length; i++) {
        var node = textNodes[i];
  
        for (var j = 0; j &lt; wordsInTextNodes[i].length; j++) {
          // Only change a tenth of the words each round.
          if (Math.random() &gt; 1 / 10) {
            continue;
          }
  
          var wordMeta = wordsInTextNodes[i][j];
  
          var word = node.nodeValue.slice(
            wordMeta.position,
            wordMeta.position + wordMeta.length
          );
          var before = node.nodeValue.slice(0, wordMeta.position);
          var after = node.nodeValue.slice(wordMeta.position + wordMeta.length);
  
          node.nodeValue = before + messUpWord(word) + after;
        }
      }
    }
  
    function messUpWord(word) {
      if (word.length &lt; 3) {
        return word;
      }
  
      return word[0] + messUpMessyPart(word.slice(1, -1)) + word[word.length - 1];
    }
  
    function messUpMessyPart(messyPart) {
      if (messyPart.length &lt; 2) {
        return messyPart;
      }
  
      var a, b;
      while (!(a &lt; b)) {
        a = getRandomInt(0, messyPart.length - 1);
        b = getRandomInt(0, messyPart.length - 1);
      }
  
      return (
        messyPart.slice(0, a) +
        messyPart[b] +
        messyPart.slice(a + 1, b) +
        messyPart[a] +
        messyPart.slice(b + 1)
      );
    }
  
    // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
  
    setInterval(messUpWords, 50);
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="controls pt-5"&gt;
  &lt;button class="start"&gt;Simulate&lt;/button&gt;
  &lt;button id="stop"&gt;Stop&lt;/button&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div&gt;
    &lt;h1&gt;Trying&lt;/h1&gt;
  
    &lt;p&gt;Friends who have dyslexia described to me how they experience reading. She &lt;em&gt;can&lt;/em&gt; read, but it takes a lot of concentration, and the letters seems to "jump around".&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The function works pretty well. I'm just having a hard time making another button stop this function from running... Any help would be appreciated and I wish y'all a nice week.</p>