CODEWITHSUNDEEP
javascriptjquery
Dan
Dan

Reputation: 2837

Why is this jQuery event triggering multiple times?

$('#MyVideo').on(
   'timeupdate',
   function(event) {

     // Save object in case you want to manipulate it more without calling the DOM
     $this = $(this);
     var state = 0;
     if ((this.currentTime > (this.duration - 35)) && (state == 0)) {
       state = 1;
       console.log(state);
     };
     //Reset state
     if (this.currentTime < (this.duration - 5)) {
       state = 0;
     }
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="box1">
        <video width=100% id="MyVideo" preload="auto" autoplay loop muted="muted" volume="0"> 
            <source src="https://emmy-kane-9tej.squarespace.com/s/343731697.mp4" type="video/mp4"> 
        </video>
 </div>

I have a looping video and I want to call a fadeOut function towards the end of the video. However, my function gets called a bunch of times, and seems to ignore that the state variable has changed. I'm pretty new to jQuery, so I could be missing something really obvious here, does anybody see why this code would continually send "1" to the console?

Upvotes: 0

Views: 49

Answers (3)

nixkuroi
nixkuroi

Reputation: 2269

The problem is that you're setting state inside the function, and then it gets reset each time the function is run.

What you should be doing instead is setting it outside your .on() function, and then not setting it again except when your criteria are met.

var state = 0;
$('#MyVideo').on(
   'timeupdate',
   function() {

     // Save object in case you want to manipulate it more without calling the DOM
     if ((this.currentTime > (this.duration - 35)) && (state == 0)) {
       state = 1;
       console.log(state);
     };
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="box1">
        <video width=100% id="MyVideo" preload="auto" autoplay loop muted="muted" volume="0"> 
            <source src="https://emmy-kane-9tej.squarespace.com/s/343731697.mp4" type="video/mp4"> 
        </video>
 </div>

Check out this jsfiddle: https://jsfiddle.net/p98wwe5L/1/

Upvotes: 2

Midas
Midas

Reputation: 7131

var state = 0;
$('#MyVideo').on('timeupdate', function(event) {
  if (state == 1 && this.currentTime < this.duration - 5) {
    state = 0;
    console.log(state);
  } else if (state == 0 && this.currentTime > this.duration - 5) {
    state = 1;
    console.log(state);
    // Fade out
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video width=100% id="MyVideo" preload="auto" autoplay loop muted="muted" volume="0"> 
  <source src="https://emmy-kane-9tej.squarespace.com/s/343731697.mp4" type="video/mp4"> 
</video>

Upvotes: 0

Jorge Hess
Jorge Hess

Reputation: 550

Try this

var state = 0;
$('#MyVideo').on(
   'timeupdate',
   function() {

     // Save object in case you want to manipulate it more without calling the DOM
     if ((this.currentTime > (this.duration - 35)) && (state == 0)) {
       state = 1;
       console.log(state);
     };
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="box1">
        <video width=100% id="MyVideo" preload="auto" autoplay loop muted="muted" volume="0"> 
            <source src="https://emmy-kane-9tej.squarespace.com/s/343731697.mp4" type="video/mp4"> 
        </video>
 </div>

Upvotes: 1

Related Questions