jQuery Timout-Funktion stört das Umschalten

Question

Ich habe ein Kontrollkästchen, das ich nur für 7 Sekunden überprüft bleiben und dann selbst deaktivieren möchten. Ich habe den folgenden Code zusammengestellt, aber trotz des Versuches, das Timeout zu löschen, scheint es das Umschalten zu stören, wenn der Benutzer mehrmals auf den Schalter klickt.

Kann mir jemand helfen, einen saubereren Weg zu finden, der sich nicht benimmt, wenn die Benutzer zu häufig klicken?

$('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

Entfernen Sie .change() von dieser Zeile und versuchen Sie es. $ ('input # foo'). Prop ('checked', false);

Answer 2

Ich habe es so eingestellt, dass nur die Aktion funktioniert 7 Sekunden, nachdem er angeklickt wird, ist dies die Fehl verhalten

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 lösen sollte -

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