Проблема с таймерами

283
14 февраля 2017, 21:25

Суть всей задачи, которую я себе придумал - нужно сделать так, чтобы первый объект запускался функцией setInterval, причём не важно сколько раз, а затем легко останавливал ВСЕ циклы с помощью ПКМ.
Это я успешно сделал.

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

Проблемы:

  1. У меня не останавливается функция setTimeout.

  2. Я не знаю как ограничить запуск второй функции, чтобы её можно было запустить всего-лишь 1 раз и не более.

  3. Я не знаю как сделать так, чтобы нажатие ПКМ по второму объекту, не останавливал первый.

Подскажите пожалуйста, в голове идея есть, а все справочники предоставляют решения через if'ы и всякие jquerry, с которым я еще не знаком, т.е. обойтись надо как-то без них.

https://repl.it/FgsA/29

var $rot = 0; 
var $rot2 = 0; 
var $contextmenu = 0; 
var $timerId = []; 
var $timerId2 = 0; 
var $timerId3 = []; 
 
function rotinp($pl) { 
  $rot = $rot + $pl; 
  document.getElementById('im1').style.transform = "rotate(" + $rot + "deg)"; 
} 
 
function rotinp2($pl) { 
  $rot2 = $rot2 + $pl; 
  document.getElementById('im2').style.transform = "rotate(" + $rot2 + "deg)"; 
} 
 
function my_click($event) { 
  $timerId.push(setInterval("rotinp(30);", 60)); 
  $click++ 
} 
 
function my_click2($event) { 
  $timerId3.push(setTimeout("colinp('blue');", 3000)); 
  $timerId2 = setInterval("rotinp2(-30);", 60); 
  $click++; 
} 
 
function colinp($pl) { 
  document.getElementById('im3').style.backgroundColor = $pl; 
} 
 
function my_contextmenu($event) { 
  $event.preventDefault(); 
  $timerId.forEach(clearInterval).length = 0; 
  $timerId3.forEach(clearTimeout).length = 0; 
  $contextmenu++; 
}
table { 
  border-collapse: separate; 
} 
td { 
  padding: 28px; 
}
<table border="1px"> 
  <tr> 
    <td onClick="my_click(event);" onContextMenu="my_contextmenu(event);"> 
      <img id="im1" src="https://pp.vk.me/c637619/v637619597/38a2a/-FsXr_IGLuI.jpg" width="130"> 
    </td> 
    <td id="im3" onClick="my_click2(event);" onContextMenu="my_contextmenu(event);"> 
      <img id="im2" src="https://pp.vk.me/c637619/v637619597/38a31/ik9uDnLPS4E.jpg" width="130"> 
    </td> 
  </tr> 
</table>

Answer 1

1) Организуйте свой код.

  • Код написан в кодстайле неподходящем JS,
  • Не надо именовать переменные с $ - это делается обычно для переменных обернутых jQuery,
  • setInterval и setTimeout - не стоит первым аргументом передавать строку - это некрасиво и плохо. Передавайте функции.
  • Array.forEach(...).length - не работает, forEach не возвращает this.

2) Что-то в этом духе:

var once = false;
function func() {
    if (once) return;
    once = true;
    //...
}

3) Отвяжите евент onContextMenu от второго элемента и разбейте функцию my_contextmenu на две

p.s. похоже на тестовое задание, перед тем как делать такие вещи начните с простого

READ ALSO
Работа промисов
javascript

Работа промисов

Добрый ВечерНаткнулся на такой пример с промисами :

 382
Как обновить в контроллере изменение в фабрике?
javascript

Как обновить в контроллере изменение в фабрике?

Почему не обновляются storage? Как сделать так чтобы данные приходя, записывались и на моей странице автоматически изменялись? Если выполнить...

 321
Изменение документа в mongodb по времени
javascript

Изменение документа в mongodb по времени

В MongoDB можно создать индекс для удаления документа по времени (TTL)Имеется ли подобные средства для обновления документа

 335
Замена строки в подстроке JavaScript
javascript

Замена строки в подстроке JavaScript

Есть строка:

 289