Q:

How can I stop a function early? 

I have made a timed function that delays for 9 second after the page loads before starting.  However, I would like it to be cancelled if a user interacts with the div it is affecting.  Here is my code for the function being called. 
function buttonchange4(){
  $(".button4").css("backgroundColor","yellow").delay(3000).queue(function(next4){
  $(".button4").css("backgroundColor","silver");
     next4();
  });
};

var buttonshow3;
  $(document).ready(function(){
  $(".button4").delay(9200).queue(function(nextoooo){
      buttonchange4();
      buttonshow3 = setInterval( buttonchange4, 12000);
      nextoooo();
  });
});

And here is my code for stopping the function. 
$('.button4').click(function(){
   $( ".button4" ).stop();
   clearInterval(buttonshow3);
   $('.button4').css("backgroundColor","yellow");
});

For some reason, after the delay of 3 seconds it still changes the background color of the button to silver... It seems to stop the delay function and jump straight to buttonchange4(); How can I stop this? 

A:

return; breaks and stops the function
if you want to break the TimeInterval you can do it this way: 
var i = setInterval(FunctionA, 1000);
clearInterval( i ); 

or you can stop the delay() with dequeue();: 
$( ".button4" ).dequeue();

