होवर विग्गल इफेक्ट: माउसलीव पर सेल्फ-कॉलिंग फंक्शन को कैसे रोकें?

मैं जानकारी पृष्ठ के निचले भाग पर ब्यूरो.कूल वेबसाइट पर दिखाए गए होवर राज्यों में पाए गए आकर्षक पाठ को दोहराने की कोशिश कर रहा हूं https://bureau.cool/#!/info

यहाँ मैं अब तक कहाँ हूँ: https://codepen.io/isaidicanshout/pen/QYxxJV

मैंने मूल रूप से एक ऐड/निकालें वर्ग के साथ सीएसएस एनीमेशन का उपयोग करने की कोशिश की, जिसका वांछित प्रभाव था, इसके अलावा प्रभाव आसानी से रोकने/शुरू करने के बजाय तुरंत "स्नैप" करेगा।

इसलिए मैंने एक अनंत दोहराव वाले फ़ंक्शन का उपयोग करके स्क्रैच से शुरू किया जो ट्रांसफॉर्म को टॉगल करता है: स्केल वाई क्लास बार-बार, हालांकि मुझे होवर करना बंद करने के बाद फ़ंक्शन को रोकने में परेशानी हो रही है।

मेरा प्रश्न: मैं एक ऐसा फ़ंक्शन कैसे बनाऊं जो होवर करते समय हमेशा के लिए दोहराए, लेकिन जब आप होवर करना बंद कर दें तो तुरंत रुक जाए?

// MAKES WORDS WIGGLE ON HOVER
function wiggler() {
  // Hover on .wiggle class
  $('.wiggler').hover(function(index) {
    var currentHover = $(this);
    console.log(currentHover);
    function repeatForever() {
      // Finds all spans inside the hovered element, does something after a pause
      // uses jquery-timing.min.js
      $(currentHover).children('span').each($).wait(15, function(index) {
        // Toggle the animation class
        $(this).toggleClass('ani');
      });
      // repeats forever
      window.setTimeout(repeatForever, 300);
    };
    // starts the loop
    repeatForever();
  },function() {
    var currentHover = $(this);
    console.log(currentHover);
    $(currentHover).children('span').each($).wait(15, function(index) {
      // trying to stop it from happening, but to no avail
      $(this).clearQueue().removeClass('ani');
    });
  });
};