2015-04-24 4 views
1

Я изучаю JS и в настоящее время изучаю свой экзамен MTA, поэтому я не эксперт, как вы можете видеть. Я не понимаю, где находится элемент, который делает этот код исполнять снова и снова.Что делать, чтобы этот код выполнялся снова и снова

При загрузке документа, init() называется, он получает элемент, который будет перемещен, а затем он вызывает move_par()

А вот функция перемещает элемент до тех пор, пока не достигнет 300. Почему после этого выполняется его начинается снова?

Вы не можете помочь.? Благодаря

здесь код

<!DOCTYPE html> 
<html> 
<head> 
    <title> Animation</title> 
    <script type="text/javascript"> 
     function move_par() { 
      current += 1; 
      if (current > 300) { 
       current = 0; 
      } 
      par.style.left = current; 
      var rate = document.getElementById("rate").value; 
      setTimeout(move_par, rate); 
     } 
     function init() { 
      par = document.getElementById("ori"); 
      par.style.position = "absolute"; 
      current = 0; 
      move_par(); 
     } 
    </script> 

</head> 
<body onload="init();"> 
    <h1> animation with js</h1> 
    <form> 
     <input id="rate" type="number" value="18" min="1" max="100"> 
     </input> 
    </form> 
    <p id="ori"> Do you see me moving?</p> 

</body> 
</html> 
+4

Это 'SetTimeout (move_par, скорость)', 'move_par()' выполняется каждые 'rate' миллисекунды. –

+0

спасибо Кайл ... в соответствии с W3school установить тайм-аут shoul будет выполнен один раз. «Определение и использование» Метод setTimeout() вызывает функцию или оценивает выражение после заданного количества миллисекунд. Совет: 1000 мс = 1 секунда. Совет. Функция выполняется только один раз. Если вам нужно повторить выполнение , используйте метод setInterval(). Совет. Используйте метод clearTimeout(), чтобы предотвратить запуск функции. " - поэтому почему повторяется более одного раза – shark6552

ответ

2

Первая анимация запускается в функции init(), где вы вызываете move_par(); Вторая анимация запускается, потому что вы снова вызываете функцию из обертки setTimeout(move_par, rate);.

+0

War Thanks. Но, согласно w3schools.com, установите время, когда shoul будет выполнен один раз. «Определение и использование» Метод setTimeout() вызывает функцию или вычисляет выражение после заданного количества миллисекунд. Совет: 1000 мс = 1 секунда Совет: функция выполняется только один раз. Если вам нужно повторить выполните метод setInterval().Совет. Используйте метод clearTimeout(), чтобы предотвратить запуск функции. "- Так что это должно быть выполнено ONCE, и если я хочу повторить использование setInterval? – shark6552

+0

@ shark6552 Это правильно. Однако функция callbunch, использующая' move_par', содержит 'setTimeout', что вызывает эффект рекурсии, который вы видите. Каждый' setTimeout' выполняется только один раз. Однако каждый раз, когда вы вызываете 'move_par', вызывается после миллисекунд« rate », функция выполняется и * ** Создается новый *** setTimeout, создающий рекурсивный бесконечный цикл. – War10ck

1

move_par заканчивается с линией SetTimeout (move_par, скорость); которые планируют новое выполнение функции, так что это кажется нормальным поведением. Вам нужно вернуться раньше из функции, если вы не хотите ее снова называть.

+0

Спасибо JP Да, я знаю, это нормальное поведение, я просто не знаю, почему, или что, и я хочу узнать, что это заставило это повторить. Но, согласно w3schools.com, установите время, когда shoul будет выполнен один раз. «Определение и использование Метод SetTimeout() вызывает функцию или вычисляет выражение после определенного количества миллисекунд Совет. 1000 мс = 1 второй Совет. Функция выполняется только один раз Если вам нужно повторить. выполните метод setInterval(). Совет. Используйте метод clearTimeout(), чтобы предотвратить запуск функции. " – shark6552

+0

функция issetimeout не интервал, поэтому почему повторяется? – shark6552

+0

вы вызываете setTimeout INSIDE move_par. Таким образом, каждый раз, когда движется move_par, он снова запускается, поэтому он снова запускается и снова вызывает setTimeout и т. Д. –

-1

Использование JQuery:

$("#rate").change(function() { 
    value = $(this).val(); 
    $("#ori").css("margin-left",value+'px') 
}); 

Затем добавьте Левое поле: 0 в #ori элемент и он должен работать.

demo