Why is my JS console logging so many of the same information?

Question

this is the code I'm using:

  $("#super_feature").hover(function () {
      $(window).mouseup(function () {
          dragBarPos = ($(".jspPane").position().left) * -1;
          console.log(dragBarPos);
      });
      if (dragBarPos > 1500) {
          api.scrollTo(0);
      }
  });

I'm getting the ".jspPane" 'left' position whenever I hover and in sequence, mouse up the "#super_feature" (its like dragging, that's the only way I got it to work, mousedown wasn't working)

However, my problem is that when I do this: console.log(dragBarPos); the console lists about 20 of the same position information. Anyone knows why is that? I'm afraid I'll have performance issues.

Answer 1

You are nesting events. So when ever you hover event is triggered a new mouseup event on the window is bound which logs multiple times.

Your code has to look something in these lines.

var dragBarPos = 0;
$(window).mouseup(function () {
     dragBarPos = ($(".jspPane").position().left) * -1;
     console.log(dragBarPos);
}); 

$("#super_feature").hover(function () {
      if (dragBarPos > 1500) {
          api.scrollTo(0);
      }
  });