Question

每次单击下面的按钮，900 ms的间隔就会越来越短。

如何避免这种情况？

$('button').on('click', function(){
	$('#mark').show();
	setInterval(function(){$('#mark').hide();}, 900);
});

.mark{
display:none;
font-size:3rem;
color:lightseagreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='mark' id='mark'>000</div>

Answer 1

我认为您应该使用setTimeout而不是setInterval。

$('button').on('click', function() {
  $('#mark').show();
  console.log('show');
  setTimeout(function() {
    $('#mark').hide();
    console.log('hide');
  }, 900);
});

.mark {
  display: none;
  font-size: 3rem;
  color: lightseagreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='mark' id='mark'>000</div>

Answer 2

使用setTimeout()代替setInterval()

实际上，setInterval()将永远执行代码，直到您将其清除为止。例如，在您的代码中，每隔900毫秒就会显示一次文字。

$('button').on('click', function(){
	$('#mark').show();
	setTimeout(function(){$('#mark').hide();}, 900);
});

.mark{
display:none;
font-size:3rem;
color:lightseagreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='mark' id='mark'>000</div>

Answer 3

如果间隔已经在下一次单击中运行，则需要清除该间隔，否则它将在您的show函数之后执行，并会导致错误的结论，即间隔越来越短。

看来，您不需要setInterval，但是需要setTimeout，因为您只需要在显示数字后将其隐藏一次即可。

let timer = null;
$('button').on('click', function(){
  if(timer) {
    clearTimeout(timer);
  }
	$('#mark').show();
	timer = setTimeout(function(){$('#mark').hide();}, 900);
});

.mark{
display:none;
font-size:3rem;
color:lightseagreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='mark' id='mark'>000</div>

每次点击后间隔会越来越短

3 个答案: