1

При наведении на движущийся элемент функция перестаёт работать и элемент останавливается. Не получается...

let action = 0;
let block = document.getElementById('block');
let go = function move(){
  
  action += 5;
  block.style.marginLeft = action + 'px';
}

setInterval(go, 1000);


block.onmouseover = function(){
  go = false;
}
#block {
  width: 100px;
  height: 100px;
  border: 1px dotted white;
  background-color: gray;
}
<div id="block"></div>

0

3 ответа 3

1

let action = 0;
let block = document.getElementById('block');
let go = true; 
let timer;

function move() {
  if (go) {
    action += 5;
    block.style.marginLeft = action + 'px';
    timer = setTimeout(move, 1000);
  }
}

block.onmouseover = function(){
  go = false;
  clearTimeout(timer);
}
block.onmouseout = function(){
  go = true;
  move();
}

move();
#block {
  width: 100px;
  height: 100px;
  border: 1px dotted white;
  background-color: gray;
}
<div id="block"></div>

1

При наведении останавливается, а когда мышка уходит, снова запускается

let action = 0;
let block = document.getElementById('block');
function move(){
  
  action += 5;
  block.style.marginLeft = action + 'px';
}

let timer = setInterval(move, 1000);


block.onmouseover = function(){
  clearInterval(timer);
}

block.onmouseout = function(){
  timer = setInterval(move, 1000);
}
#block {
  width: 100px;
  height: 100px;
  border: 1px dotted white;
  background-color: gray;
}
<div id="block"></div>

0

let action = 0;
const block = document.getElementById('block');
const interval = setInterval(() => {
  action += 5;
  block.style.marginLeft = action + 'px';
}, 1000);
block.onmouseover = () => clearInterval(interval);
#block {
  width: 100px;
  height: 100px;
  border: 1px dotted white;
  background-color: gray;
}
<div id="block"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.