Javascript jQuery timout函数干扰切换

我有一个复选框，我只想保持选中7秒钟，然后取消选中自己。我已经编写了下面的代码，但是尽管试图清除超时，但如果用户多次单击切换，它似乎会干扰切换

有谁能帮我找到一个更干净的方法来做到这一点，如果用户点击太频繁，不会出现错误行为

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

    }
  });

从此行中删除.change（），然后重试。

---

$（'input#foo'）.prop（'checked'，false）

我将其设置为仅在单击操作7秒后才生效，这应该可以解决错误行为

HTML

小提琴-

---

超时范围仅在“更改”功能内。将

var timeout=

移动到

$（“输入#foo”）之前。打开（“更改…”

。每次调用on change函数时，超时都将为空。您可以通过一个简单的

控制台来确认这一点。日志（超时）

在ClearTimeout之前，如果您不想邀请反对票，您可能希望添加一点，而不仅仅是复制并粘贴原始代码……啊，抱歉，不清楚您是否更改了这一行。请始终添加解释。

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

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