javascript - How to multiply a function in a SetInterval on a addEventListener('click'); -

so made code (with of tutorial) , want create effect wherever click.

the code has to, every time click , call 'drawparticle'-function, process speeds , less particles been shown. think because call on multiple setintervals @ once while javascript single threaded. how can fix it?

var   canvas,       c,       particles,       particleindex,       particlenum,       w,       h;  window.onload =function(){      canvas = document.createelement("canvas");     c = canvas.getcontext("2d");     particles = {};     particleindex = 0;     particlenum = 3;     w = window.innerwidth;     h = window.innerheight;      canvas.width = w;     canvas.height = h;      document.body.appendchild(canvas);      c.fillstyle ="black";     c.fillrect(0,0,canvas.width,canvas.height);      canvas.addeventlistener('click', drawparticle, false); };  function drawparticle(e){      function particle(){         this.x = e.clientx;         this.y = e.clienty;         this.vx = math.random() * 10 - 5;         this.vy = math.random() * 10 - 5;         this.gravity = 0.2;         particleindex++;         particles[particleindex] = this;         this.id = particleindex;         this.life = 0;         this.maxlife = math.random() * 30 + 50;         this.color = "rgb("+parseint(math.random()*255,10)+",0,0)";        }      particle.prototype.draw = function(){          this.x += this.vx;         this.y += this.vy;          if(math.random() < 0.1 ){            this.vx = math.random() * 10 - 5;            this.vy = math.random() * 10 - 5;          }           //this.vy += this.gravity;         this.life++;          if(this.life >= this.maxlife){          delete particles[this.id];         }          c.fillstyle = this.color;         c.fillrect(this.x,this.y,10,10);       };      interval = setinterval(function(){         //c.globalcompositeoperation ="source-over";         c.fillstyle ="rgba(0,0,0,0.3)";         c.fillrect(0,0,canvas.width,canvas.height);          (var = 0; < particlenum; i++){          new particle();         }         //c.globalcompositeoperation ="lighter";         (var in particles){             particles[i].draw();         }     },30);  }; 

i think you're correct interval. i'm not sure if reaction want if clear interval before redrawing, things don't speed up. try like:

var interval = null; function drawparticle(e){    if (interval) {      clearinterval(interval)   }    function particle(){     ... 

there's codepen here http://codepen.io/bunnymatic/pen/bjwvbm

update:

i've changed code pen include new code included below. primary change make particles object hold set of particles being drawn each click. moving collection of particles , particleindex seems have solved issue. suspect there strange adding each element global particles list. particles instance manages particles associated group.

i took out particleid because seemed unnecessary, though may need put in if it's useful other stuff out side of code.

here's updated code:

var   canvas, c, particlenum, w, h;  window.onload =function(){    canvas = document.createelement("canvas");   c = canvas.getcontext("2d");   particlenum = 3;   w = window.innerwidth;   h = window.innerheight;    canvas.width = w;   canvas.height = h;    document.body.appendchild(canvas);    c.fillstyle ="black";   c.fillrect(0,0,canvas.width,canvas.height);    canvas.addeventlistener('click', drawparticles, false); };  function particles() {   this.particles = {};   this.particleindex = 0; }  particles.prototype.addparticle = function(particle) {   this.particles[++this.particleindex] = particle; }  particles.prototype.killdeadparticles = function() {   (var in this.particles) {     var particle = this.particles[i];     if (particle.isdead()) {       delete this.particles[i]     }   } }  particles.prototype.draw = function() {   // draw particles   (var in this.particles){     this.particles[i].draw();   }   this.killdeadparticles(); }   function particle(e){   this.x = e.clientx;   this.y = e.clienty;   this.vx = math.random() * 10 - 5;   this.vy = math.random() * 10 - 5;   this.gravity = 0.2;   this.life = 0;   this.maxlife = math.random() * 30 + 50;   this.color = "rgb("+parseint(math.random()*255,10)+",0,0)";   // console.log('new particle', particleindex); }  particle.prototype.isdead = function() {   return (this.life >= this.maxlife); }  particle.prototype.draw = function(){    this.x += this.vx;   this.y += this.vy;    if(math.random() < 0.1 ){     this.vx = math.random() * 10 - 5;     this.vy = math.random() * 10 - 5;    }    //this.vy += this.gravity;   this.life++;    c.fillstyle = this.color;   c.fillrect(this.x,this.y,10,10); };  function drawparticles(e){    var particles = new particles(e);    setinterval(function(){     //c.globalcompositeoperation ="source-over";     c.fillstyle ="rgba(0,0,0,0.3)";     c.fillrect(0,0,canvas.width,canvas.height);      (var = 0; < particlenum; i++){       var particle = new particle(e);       particles.addparticle(particle);     }     //c.globalcompositeoperation ="lighter";     particles.draw();   },30);  };