Disable jQuery function on click element

Question

I am using this function to autorotate between tabs on my website:

$(function(autorotate) {
  var lis = $("#aanpak .tab_titles .tab"),
   currentHighlight = 0;
   N = 5;//interval in seconds
    setInterval(function() {
      currentHighlight = (currentHighlight + 1) % lis.length;
 lis.removeClass('active_tab').eq(currentHighlight).addClass('active_tab');
  }, N * 1000);
});

Working fine. But I want this function to be disabled if I click on #aanpak .tab_titles .tab. Can someone help with this. So basically it is all about disabling this function.

Answer 1

You need to define a var, let say myInterval, and then assign the setInterval to it, to be able to use clearInterval to stop it when #aanpak .tab_titles .tab is clicked:

var myInterval;
$(function(autorotate) {
   var lis = $("#aanpak .tab_titles .tab"),
   currentHighlight = 0;
   N = 5; //interval in seconds
   myInterval = setInterval(function() {
      currentHighlight = (currentHighlight + 1) % lis.length;
      lis.removeClass('active_tab').eq(currentHighlight).addClass('active_tab');
   }, N * 1000);
});
$("#aanpak .tab_titles .tab").on('click', function(){
    clearInterval(myInterval);
});