Интервал становится короче и короче после каждого клика - PullRequest
Новая
       14

Интервал становится короче и короче после каждого клика

0 голосов
/ 28 июня 2019

Каждый раз, когда нажимается кнопка ниже, интервал в 900 мс становится все короче и короче.

Как этого избежать? 

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

Ответы [ 3 ]

2 голосов
/ 28 июня 2019

Я думаю, вы должны использовать 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>
1 голос
/ 28 июня 2019

используйте 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>
0 голосов
/ 28 июня 2019

Вам нужно очистить интервал, если он уже запущен при следующем щелчке, иначе он будет выполнен после вашей функции показа и приведет к ложному выводу, что интервал становится короче.

Также кажется, что вам не нужен 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>
...