javascript - End a .each and a setTimeout() -


i'm trying figure out stop/start buttons using javascript , jquery. have jsfiddle set try understand can't work: http://jsfiddle.net/kkx7m88c/

the start button should turn each box red 1 @ time. stop button should revert boxes blue , stop more turning red until start button pressed again. currently, stop button turn boxes blue doesn't stop play function, meaning boxes hadn't been turned red yet don't stop. turn red.

here js:

// new class turns boxes red css  function goclasses(item, container) {     $(container).removeclass('stopped');     $(item).addclass('new'); }  function stopclasses(item, container) {     $(item).removeclass('new');     $(container).addclass('stopped'); }   $('#go').mousedown(function () {     $('.box').each(function(i){         var item = $(this);         var container = $('.selection');         settimeout(function () {             goclasses(item, container);         }, 500 * i);         if ($(container).hasclass('stopped')) {             //cleartimeout(); /* doesn't appear */             //return false; /* stops 'go' button working when clicked again after 'stop' button has clicked */         }     }); });  $('#stop').mousedown(function () {     $('.box').each(function (i) {         var item = $(this);         var container = $('.selection');         stopclasses(item, container);     }); }); 

it's understanding if end settimeout , .each in mousedown section work... maybe have totally off. maybe should using setinterval() instead? i'm new jquery i'm still figuring out!

store reference timer , cancel it

$('#go').mousedown(function () {     $('.box').each(function(i){         var item = $(this);         var container = $('.selection');         var timer = settimeout(function () {  //store id settimeout returns             goclasses(item, container);         }, 500 * i);         item.data("timer", timer);  //store data attribute     }); });  $('#stop').mousedown(function () {     $('.box').each(function (i) {         var item = $(this);         window.cleartimeout(item.data("timer"));  //check data attribute timer , cancel         var container = $('.selection');         stopclasses(item, container);     }); }); 

Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -