Есть картинка на странице. Она вращается по клику на определенный градус (через таймер). Как мне обезопаситься от дублирования таймера при повторных кликах на картинку?
Фрагмент скрипта:
var $rot = 0;
var $tim3;
function rotkar($kol) {
$rot = $rot + $kol;
document.getElementById('kar').style.transform = "rotate(" + $rot + "deg)";
} //'kar'- это картинка
function clickar() {
$tim3 = setInterval("rotkar(7);", 1000);
}
function $trot() {
clearInterval($tim3);
}
Ответ
Можно, например, при клике проверять, есть ли ID интервала в переменной $tim3
document.addEventListener("DOMContentLoaded", function() {
var $rot = 0;
var $tim3;
var image = document.getElementById('kar');
function rotkar($kol) {
$rot += $kol;
image.style.transform = "rotate(" + $rot + "deg)";
}
image.addEventListener("click", function() {
if ($tim3 == undefined) {
$tim3 = setInterval(function() {
rotkar(7);
}, 1000);
}
});
});
Добавлять обработчик события через onclick - не лучшая затея.
Передавать строку в качестве первого параметра setInterval и setTimeout - тем более.
Комментариев нет:
Отправить комментарий