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

Question

我有这个使用 jQuery 的代码，但我不确定我应该用什么来实现这个想法。如果用户不点击图像，文本会在几秒钟后自动显示。我应该在 CSS 中添加动画延迟吗？jQuery(document).ready(function(){    jQuery( "#picture2" ).bind( "click", function() {        jQuery ('#txt2').show();    });});

Answer 1

您可以使用单击按钮时将重置的超时。

在下面的示例中，如果您在 5 秒内未单击按钮，则会显示文本。我将bind()函数更改为，on()因为第一个函数自 3.0 版以来已被弃用。

//initial timeout initializer

var timer = setTimeout(handler, 5000);

//reset the timout onclick

$('#clicker').on('click', () => {

  $('#text').hide();

  window.clearTimeout(timer);

  timer = setTimeout(handler, 5000);

});

//hanlder function to show the text when the timeout is triggered

function handler() {

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