当用户一段时间没有点击图片时自动显示文本

Question

我有这个使用 jQuery 的代码，但我不确定我应该用什么来实现这个想法。如果用户不点击图像，文本会在几秒钟后自动显示。我应该在 CSS 中添加动画延迟吗？

jQuery(document).ready(function(){

    jQuery( "#picture2" ).bind( "click", function() {

        jQuery ('#txt2').show();

    });

});

Answer 1

您可以使用单击按钮时将重置的超时。在下面的示例中，如果您在 5 秒内未单击按钮，则会显示文本。我将bind()函数更改为，on()因为第一个函数自 3.0 版以来已被弃用。//initial timeout initializervar timer = setTimeout(handler, 5000);//reset the timout onclick$('#clicker').on('click', () => {&nbsp; $('#text').hide();&nbsp; window.clearTimeout(timer);&nbsp; timer = setTimeout(handler, 5000);});//hanlder function to show the text when the timeout is triggeredfunction handler() {&nbsp; $('#text').show();}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="clicker">Click me!</button><p id="text" style="display: none;">Please click me :(</p>