jQuery timout函数干扰切换

Question

I have a checkbox that I want to only stay checked for 7 seconds and then uncheck itself. I've put together the below code, but despite trying to clear the timeout, it seems to interfere with toggling if the user clicks several times on the toggle.

Can anyone help me find a cleaner way to do this that won't mis-behave if the users click too frequently?

$('input#foo').on('change', function(){
    clearTimeout(timeout);
    if ( $(this).is(':checked') ) {
        $('#box').addClass('splash').stop();
        $( "div.title" ).html( 'Hide thing' );
        var timeout = setTimeout(function() {
          if ( $('input#foo').is(':checked') ) {
            $('input#foo').prop('checked', false).change();
          }
        }, 7000);
    } 
    else {
        $('#box').removeClass('splash').stop();
        $( "div.title" ).html( 'Reveal thing' );

    }
  });

Answer 1

Remove .change() from this line,and try it. $('input#foo').prop('checked', false);

Answer 2

I've set it so the action only works 7 seconds after it is clicked, this should solve the mis-behaving

HTML

<input class="checkbox" type="checkbox">I will become unchecked in 7 seconds<br>

jQuery

$(".checkbox").click(function() {
  setTimeout(function() {
    $('.checkbox').prop('checked', false);
  }, 7000);
});

Fiddle -

https://jsfiddle.net/8y8zu47p/2/