Question

我有一个div“pushBtns”和一个id为“showPushBtns”的锚标签，“pushBtns”将隐藏在pageload上，并在pageload之后的5秒内出现。但是，如果用户单击锚点“showPushBtns”，它应该停止“timedShow（）”函数并且应该出现div“pushBtns”。定时显示隐藏功能工作正常，但我不能让“clearTimeout”工作。请帮忙吗？

P.S我是jQuery的初学者。

<script type="text/javascript">
$(document).ready(function() {
  var theButtons = $("#pushBtns");
  theButtons.hide();
  function showIt(){
     theButtons.show(1000);
  }
  function timedShow() { 
     var timer = setInterval(function() {showIt();},5000);
  }
  timedShow();
  $('#showPushBtns').click(function(){
     clearTimeout(timer);
  });
});
</script>

ANSWERED http://jsfiddle.net/pcvhG/6/

谢谢@mguimard

var theButtons = $("#pushBtns");
var togglBtn = $("#showPushBtns");
var timer;
$(document).ready(function() {
theButtons.hide();
function showIt(){theButtons.show(1000);}
function timedShow() { setTimeout(function() {showIt();},5000);}
timedShow();
$('#showPushBtns').click(function(){clearTimeout(timedShow());showIt()});
});

Answer 1

使用clearInterval，而不是clearTimeout。

或者，使用setTimeout和clearTimeout，更适合您的需求。你为什么要每5秒拨一次showIt？

Answer 2

您的计时器变量是您的timedShow函数的本地变量 - 将其设为全局，您需要使用clearInterval

$(document).ready(function () {
    var timer;
    var theButtons = $("#pushBtns");
    theButtons.hide();

    function showIt() {
        theButtons.show(1000);
    }

    function timedShow() {
       timer = setInterval(function () {
            showIt();
        }, 5000);
    }
    timedShow();
    $('#showPushBtns').click(function () {
        clearInterval(timer);
    });
});

https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval

Answer 3

clearTimeout(timer)只是清除计时器，因此永远不会运行该函数。因此，您需要在清除计时器后执行showIt()。

$('#showPushBtns').click(function()
{
   clearTimeout(timer);
   showIt();
});

编辑：还注意到您正在使用setInterval。您的意思是在那里使用setTimeout吗？

setTimeOut不工作（jQuery）

3 个答案: