JavaScript中setTimeout的内存泄漏问题

Question

I have a javascript code to control the animation a moving div.In this I used setTimeout to make the div move. you can click on the following link to play the animation.

     `http://jsfiddle.net/dudling007/PfPzj/3/`

The problem is that after playing the animation, whenever I clicked a couple of time on pause and resume buttons , it takes a lot of memory and the clicking of the pause buttons also become so slow. I saw the %CPU and real memory consumption from the activity monitor of the MAC OSX.Can someone please help me what is the problem in the code that is consuming some much memory after clicking the pause button 10 -14 times.

Answer 1

Memory leak happens because $('#pause_button').click event is set every time moveCard method is called. Button bindings should be moved out of the "object" cycle.

You can use tool link firebug for firefox to check console log of javascript. Here is your example with log on pause button. This should be happen only once. http://jsfiddle.net/Th6ha/1/

$('#pause_button').click(function() { 
console.log('pause pressed');
                      arrayObject.pause(wStart,lStart,wEnd,lEnd);
                      $('#resume_button').css('display','inline-block');
                      $('#pause_button').css('display','none');

                      }); 

You can consider using method animate of jquery