jquery - 使用 JQuery 禁用 Html 按钮一段时间

Question

我有一个 html 按钮，我想用 jquery 禁用它，在它被点击后大约 10 秒后我想启用它。

$('#test').click(function(){
     $("#test").attr("disabled", true);
     $('#test').html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');
});

我的计时器部分有问题。我知道有类似的东西，setInterval(function() {}, 5000);但这会一遍又一遍。

Answer 1

您可以使用setTimout在间隔后启用按钮。

$('#test').click(function(){
     $("#test").attr("disabled", true);
     setTimout(function(){
         $("#test").attr("disabled", false); 
      }, 10000);  
     $('#test').html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');
});

Answer 2

我希望这将有所帮助。

$('#some-button').attr("disabled", "disabled");
setTimeout('enableButton()', 5000);

function enableButton(){
   $('#some-button').removeAttr('disabled');
}

Answer 3

您可以为此使用setTimeout函数：

$('#test').click(function(){
     $("#test").attr("disabled", true);
     $('#test').html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');

     setTimout(function(){
          timeOutHit()
      }, 10000);  

});

function timeOutHit()
{
   $("#test").attr("disabled", false);
}

Answer 4

SeesetTimeout是您希望在特定时间段内使用的选项。

$('#test').click(function(){
   $(this).prop("disabled", true);
   setTimout(function(){
       $(this).prop("disabled", false); 
   }, 10000);  
   $(this).html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');
});

但是，如果在这段时间内没有完成工作怎么办。如果您使用的是ajax，那么您可以尝试使用ajaxComplete()函数。

$('#test').click(function(){
   $(this).prop("disabled", true);
   $(document).ajaxComplete(function(){
       $("#test").prop("disabled", false); 
   });  
   $(this).html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');
});