Проблема работы setInterval

223

03 июня 2018, 02:00

Есть слайдер, который прокручивается в заданный промежуток и при нажатии на него. Чтобы сдвиг при нажатии не совпадал со сдвигом через интервал, я прописал обнуление SetInterval при каждом клике и снова его установил. При этом при клике у меня выполняется сдвиг, обнуление интервала и его возобновление. Проблема в том, что после второго клика интервал будто сбивается, и уменьшается время сдвига, а примерно после клика 10-ого вовсе начинает дергать весь слайдер... Объясните пожалуйста в чем проблема, и подскажите как исправить. P.S. просьба предлагать варианты только

document.getElementById('polosa').onclick = together; 
 
var left = 0; 
var selfMove =setInterval (move,8000); 
function move(){ 
	var polosa = document.getElementById('polosa'); 
	left = left - 200; 
	if (left < -600){ 
		left=0; 
	} 
	polosa.style.left = left + 'px'; 
	 
} 
function zero(){ 
	 
	clearInterval(selfMove); 
     
} 
function again(){ 
	var selfMove =setInterval (move,8000); 
} 
function together(){ 
	move(); 
	zero(); 
	again(); 
}

body{ 
	margin:0; 
} 
#slider{ 
    width:600px; 
	overflow:hidden; 
 
} 
#polosa{ 
	position:relative; 
	display:flex; 
	left:0; 
	transition:left 1s ; 
	 
} 
img{ 
	width: 200px; 
	height: 200px; 
}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
<title>CRAFTBEER-SHOP</title> 
<meta name="keywords" content=" "> 
<meta name="description" content=""> 
<meta charset="utf-8"> 
</head> 
<body> 
<header class="page-header"> 
 
</header> 
<main class="page-main"> 
<div id="slider"> 
	<div id="polosa"> 
		<img src="kisa.jpg"> 
		<img src="sobaka.jpg"> 
		<img src="ptica.jpg"> 
		<img src="zmeya.jpg"> 
		<img src="fish.jpg"> 
		<img src="bear.jpg"> 
	</div> 
</div> 
</main> 
<script> 
 
</script> 
</body> 
</html>

введите сюда код

на чистом JavaScript

Answer 1

Ошибка - объявление локальной переменной selfMove в функции again. Код в функции again не меняет значение глобальной переменной selfMove, clearInterval ничего не делает (кроме первого раза), и несколько таймеров начинают выстреливать вперемежку.

document.getElementById('polosa').onclick = together; 
 
var left = 0; 
var selfMove = setInterval(move, 8000); 
 
function move() { 
  var polosa = document.getElementById('polosa'); 
  left = left - 200; 
  if (left < -600) { 
    left = 0; 
  } 
  polosa.style.left = left + 'px'; 
} 
 
function again() { 
  clearInterval(selfMove); 
  /*var*/ selfMove = setInterval(move, 8000); 
} 
 
function together() { 
  move(); 
  again(); 
}

body { 
  margin: 0; 
} 
 
#slider { 
  width: 600px; 
  overflow: hidden; 
} 
 
#polosa { 
  position: relative; 
  display: flex; 
  left: 0; 
  transition: left 1s; 
} 
 
img { 
  width: 200px; 
  height: 200px; 
}

  <header class="page-header"> 
 
  </header> 
  <main class="page-main"> 
    <div id="slider"> 
      <div id="polosa"> 
        <img src="kisa.jpg"> 
        <img src="sobaka.jpg"> 
        <img src="ptica.jpg"> 
        <img src="zmeya.jpg"> 
        <img src="fish.jpg"> 
        <img src="bear.jpg"> 
      </div> 
    </div> 
  </main>