The essence of the whole task that I invented myself - you need to make sure that the first object is started by the function setInterval, and no matter how many times, and then it is easy to stop ALL cycles using PCM.
I did it successfully.

The second object should be launched under the same conditions, but with the additional function setTimeout, which, in this case, colors the background blue.

Problems:

  1. The setTimeout function does not stop with me.

  2. I do not know how to limit the launch of the second function, so that it can be started only once, and no more.

  3. I do not know how to make PKM pressing on the second object, not to stop the first one.

Please tell me, there is an idea in my head, and all directories provide solutions through ifs and jquerry, with which I am not yet familiar, i.e. need to do somehow without them.

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>

    1 answer 1

    1) Organize your code.

    • The code is written in code style inappropriate JS,
    • It is not necessary to name variables with $ - this is done usually for variables wrapped by jQuery,
    • setInterval and setTimeout - it is not necessary to pass a string as the first argument - this is ugly and bad. Transfer functions.
    • Array.forEach (...). Length - does not work, forEach does not return this.

    2) Something in this spirit:

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

    3) Unlink the onContextMenu event from the second element and split the function my_contextmenu into two

    ps like a test task, before doing such things start with a simple