单击时重置计时器以进行显示和隐藏 - jquery

Reset timer on click for show and hide - jquery

本文关键字：显示 隐藏 jquery 计时器 单击      更新时间：2023-09-26

我有一个jQuery任务，单击按钮时，我必须显示一条文本消息10秒钟，我已经实现了。

现在的问题是，当文本仍然可见时，如果我单击相同的按钮，它应该重置计时器（计时器应为 0，文本应再次显示 10 秒）。以下是我所做的。你能告诉我我做错了什么吗？

$('#mybtn').live('click', function(e){
   /*mybtn is the button
    mytext is the text that should appear
   */
   e.preventDefault();
   var $mytext = $('#mytext');
   if( $mytext.length >0){ //text is existing or showing
       $mytext.stop();
       $mytext.show().delay(10000).hide(500);
   }
   else{
       $mytext.show().delay(10000).hide(500);
  }
});

试试这个：

var timer;
$('#mybtn').on('click', function(e){   
   var $mytext = $('#mytext');    
   $mytext.show(500);
   clearTimeout(timer);   
   timer = setTimeout(function(){
       $mytext.hide(500)
    },10000);        
});

在这里工作小提琴：http://jsfiddle.net/jUkbh/

也检查这个小提琴：http://jsfiddle.net/jUkbh/2/

与其使用

delay(1000)，不如使用 window.settimeout 。 

var time;
if( $mytext.length >0) {
    $mytext.stop();
    $mytext.show()
    cleartimeout(time);
    time=window.settimeout(
        function() {
            $mytext.hide(500);
        }, 1000);
}
相关文章：