javascript - Functions within a loop called multiple times. How could I go about this in a different way? -

my movemask function in code below called x amount of times each html element class .layout-box.

i'm struggling think of way of re-writing code runs functions once, each time event listener invoked.

i understand might not simple fix, if some idea of direction need heading in, i'd appreciate it.

// store svg container element variable var layoutbox = document.queryselectorall(".layout-box"),     xpos = 0,     ypos = 0,     elover = true,     clicked = false,     rect,     coords,     split = document.queryselectorall('.words h2, .words h3, .words p, .words li');  // gsap tweens/functions require access coordinates function movemask(valuex, valuey) {     [].slice.call(layoutbox).foreach(function(el, i) {         console.log("test");         var img = el.queryselectorall('.img');          // mask move animation          var tlmove = new timelinemax({             paused: true         });         tlmove.set(img, {             webkitclippath: '40px @ ' + valuex + 'px ' + valuey + 'px'         });         el.animationmaskmove = tlmove;          // mask click animation         var tlclick = tlleave = new timelinemax({             paused: true         });         tlclick.to(img, 0.8, {             webkitclippath: '500px @ ' + valuex + 'px ' + valuey + 'px',         });         tlclick.to(img, 0.4, {             '-webkit-filter': 'grayscale(0%)',              filter: 'grayscale(0%)'         }, '-=0.8');         el.animationmaskclick = tlclick;         tlclick.progress(1).progress(0); // forces initial render of tween it's cached 2nd usage          // mask leave animation         var tlleave = new timelinemax({             paused: true         });         tlleave.to(img, 0.2, {             webkitclippath: '0 @ ' + valuex + 'px ' + valuey + 'px',             '-webkit-filter': 'grayscale(100%)',              filter: 'grayscale(100%)'         });         el.animationmaskleave = tlleave;         tlleave.progress(1).progress(0);          // mask slow leave animation         var tlleaveslow = new timelinemax({             paused: true         });         tlleaveslow.to(img, 0.6, {             ease: bounce.easeout,             webkitclippath: '0 @ ' + valuex + 'px ' + valuey + 'px',             '-webkit-filter': 'grayscale(100%)',              filter: 'grayscale(100%)'         });         el.animationmaskslowleave = tlleaveslow;         tlleaveslow.progress(1).progress(0);      }); }  // force initial run temporary coordinates (so tweens can cached) movemask(-100, -100);  // gsap tweens/functions don't access coordinates [].slice.call(layoutbox).foreach(function(el, i) {     console.log("test2");     var svgcontainer = el.queryselectorall('.svg-container');     var svgcontainerleft = el.queryselectorall('.left');     var svgcontainerbottom = el.queryselectorall('.bottom');     var img = el.queryselectorall('.img');     var mask = el.queryselectorall('.mask');     var text = el.queryselectorall('.text');     var elsplit = el.queryselectorall('.words');      // container 3d push effect      var tlcontainer3d = new timelinemax({         paused: true     });     tlcontainer3d.to(svgcontainer, 0.3, {         x: "-=6px",         y: "+=6px"     });     el.animationcontainer3d = tlcontainer3d;     tlcontainer3d.progress(1).progress(0);      // container 3d push effect left     var tlcontainer3dleft = new timelinemax({         paused: true     });     tlcontainer3dleft.to(svgcontainerleft, 0.3, {         width: "4px"     });     el.animationcontainer3dleft = tlcontainer3dleft;     tlcontainer3dleft.progress(1).progress(0);      // container 3d push effect bottom     var tlcontainer3dbottom = new timelinemax({         paused: true     });     tlcontainer3dbottom.to(svgcontainerbottom, 0.3, {         height: "4px",         right: "+=6px"     });     el.animationcontainer3dbottom = tlcontainer3dbottom;     tlcontainer3dbottom.progress(1).progress(0);      // img move animation     var tlimgmove = new timelinemax({         paused: true     });     tlimgmove.to(img, 0.3, {         scale: 1,         ease: sine.easeout,         '-webkit-filter': 'grayscale(0%)',          filter: 'grayscale(0%)'     }, 0.05);     el.animationimgmove = tlimgmove;     tlimgmove.progress(1).progress(0);      // mask click text animation     var tltext = new timelinemax({         paused: true     })     tltext.to(elsplit, .3, {         autoalpha: 0     });     el.animationtextclick = tltext;     tltext.progress(1).progress(0);  });  // loop through boxes , assign event listeners (var x = 0; x < layoutbox.length; x++) {      layoutbox[x].addeventlistener("mousemove", function(e) {          if (elover) { // run if mousedown hasn't been triggered              // coordinates of container             rect = this.getboundingclientrect();             xpos = e.pagex - rect.left;             ypos = e.pagey - rect.top - window.scrolly;              // add coordinates array , pass in movemask function             coords = [xpos, ypos];             movemask.apply(null, coords);              this.animationmaskmove.play();          }      });      layoutbox[x].addeventlistener("mousedown", function(e) {          this.animationcontainer3d.play();         this.animationcontainer3dleft.play();         this.animationcontainer3dbottom.play();         this.animationmaskclick.play();         this.animationtextclick.play();         clicked = true;         elover = false;      });      layoutbox[x].addeventlistener("mouseleave", function(e) {          this.animationcontainer3d.reverse();         this.animationcontainer3dleft.reverse();         this.animationcontainer3dbottom.reverse();         this.animationtextclick.timescale(1.25).reverse();          // if clicked run slow animation         if (clicked) {             this.animationmaskslowleave.play();         } else {             this.animationmaskleave.play();         }          clicked = false;         elover = true;      });  } 

edit:

// store svg container element variable var layoutbox = document.queryselectorall(".layout-box"),     elover = true,     clicked = false,     xpos = 0,     ypos = 0,     rect,     coords;  // gsap tweens/functions require access coordinates function movemask(el, valuex, valuey) {         console.log("test");         var img = el.queryselectorall('.img');          // mask move animation          var tlmove = new timelinemax({             paused: true         });         tlmove.set(img, {             webkitclippath: '40px @ ' + valuex + 'px ' + valuey + 'px'         });         el.animationmaskmove = tlmove;          // mask click animation         var tlclick = tlleave = new timelinemax({             paused: true         });         tlclick.to(img, 0.8, {             webkitclippath: '500px @ ' + valuex + 'px ' + valuey + 'px',         });         tlclick.to(img, 0.4, {             '-webkit-filter': 'grayscale(0%)',              filter: 'grayscale(0%)'         }, '-=0.8');         el.animationmaskclick = tlclick;         tlclick.progress(1).progress(0); // forces initial render of tween it's cached 2nd usage          // mask leave animation         var tlleave = new timelinemax({             paused: true         });         tlleave.to(img, 0.2, {             webkitclippath: '0 @ ' + valuex + 'px ' + valuey + 'px',             '-webkit-filter': 'grayscale(100%)',              filter: 'grayscale(100%)'         });         el.animationmaskleave = tlleave;         tlleave.progress(1).progress(0);          // mask slow leave animation         var tlleaveslow = new timelinemax({             paused: true         });         tlleaveslow.to(img, 0.6, {             ease: bounce.easeout,             webkitclippath: '0 @ ' + valuex + 'px ' + valuey + 'px',             '-webkit-filter': 'grayscale(100%)',              filter: 'grayscale(100%)'         });         el.animationmaskslowleave = tlleaveslow;         tlleaveslow.progress(1).progress(0);  }  // force initial run temporary coordinates (so tweens can cached) [].foreach.call(layoutbox, function(el, i) { movemask(el, -100, -100) });   // gsap tweens/functions don't access coordinates [].foreach.call(layoutbox, function(el, i) {     console.log("test2");     var svgcontainer = el.queryselectorall('.svg-container');     var svgcontainerleft = el.queryselectorall('.left');     var svgcontainerbottom = el.queryselectorall('.bottom');     var img = el.queryselectorall('.img');     var mask = el.queryselectorall('.mask');     var text = el.queryselectorall('.text');     var elsplit = el.queryselectorall('.words');      // container 3d push effect      var tlcontainer3d = new timelinemax({         paused: true     });     tlcontainer3d.to(svgcontainer, 0.3, {         x: "-=6px",         y: "+=6px"     });     el.animationcontainer3d = tlcontainer3d;     tlcontainer3d.progress(1).progress(0);      // container 3d push effect left     var tlcontainer3dleft = new timelinemax({         paused: true     });     tlcontainer3dleft.to(svgcontainerleft, 0.3, {         width: "4px"     });     el.animationcontainer3dleft = tlcontainer3dleft;     tlcontainer3dleft.progress(1).progress(0);      // container 3d push effect bottom     var tlcontainer3dbottom = new timelinemax({         paused: true     });     tlcontainer3dbottom.to(svgcontainerbottom, 0.3, {         height: "4px",         right: "+=6px"     });     el.animationcontainer3dbottom = tlcontainer3dbottom;     tlcontainer3dbottom.progress(1).progress(0);      // img move animation     var tlimgmove = new timelinemax({         paused: true     });     tlimgmove.to(img, 0.3, {         scale: 1,         ease: sine.easeout,         '-webkit-filter': 'grayscale(0%)',          filter: 'grayscale(0%)'     }, 0.05);     el.animationimgmove = tlimgmove;     tlimgmove.progress(1).progress(0);      // mask click text animation     var tltext = new timelinemax({         paused: true     })     tltext.to(elsplit, .3, {         autoalpha: 0     });     el.animationtextclick = tltext;     tltext.progress(1).progress(0);  });  // event listener functions function mymousemove(e) {          if (elover) { // run if mousedown hasn't been triggered              // coordinates of container             rect = this.getboundingclientrect();             xpos = e.pagex - rect.left;              ypos = e.pagey - rect.top - window.scrolly;              // add coordinates array , pass in movemask function             coords = [xpos, ypos];             movemask.call(null, coords);              this.animationmaskmove.play();          }  }  function mymousedown(e) {          this.animationcontainer3d.play();         this.animationcontainer3dleft.play();         this.animationcontainer3dbottom.play();         this.animationmaskclick.play();         this.animationtextclick.play();         clicked = true;         elover = false; };  function mymouseleave(e) {          this.animationcontainer3d.reverse();         this.animationcontainer3dleft.reverse();         this.animationcontainer3dbottom.reverse();         this.animationtextclick.timescale(1.25).reverse();          // if clicked run slow animation         if (clicked) {             this.animationmaskslowleave.play();         } else {             this.animationmaskleave.play();         }          clicked = false;         elover = true;  };  // loop through boxes , assign event listener (var x = 0; x < layoutbox.length; x++) {     layoutbox[x].addeventlistener("mousemove", mymousemove);     //layoutbox[x].addeventlistener("mousedown", this, mymousedown);     //layoutbox[x].addeventlistener("mouseleave", this, mymouseleave); };