-->

Continuous loop of fade in/out function

2019-09-10 08:29发布

问题:

I have the following function that I would like to run on a continuous loop and I thought this would work for me, but not so because the function only runs once. I am not sure if the problem is with the method, the interval or my code. I am fairly new at this.

var c = $(".test p").length;    
setInterval(faderepeat(c),20000);

function faderepeat(c){     
  var i = 0;
  while (i<=c) {
var p = $(".para");
($(p[i]).delay(i*3000).fadeIn(2000).fadeOut(1000));
  i++;
    }
}

回答1:

Change your setInterval call to:

setInterval( function() { faderepeat(c); }, 20000);

The way you are calling it, the function runs once and setInterval calls the result of the function repeatedly.



回答2:

setInterval( function() { faderepeat(c); }, 20000); // this will fix your looping issue
function faderepeat(c){     
    var i = 0;
    while (i<=c) {
        var p = $(".para");
        ($(p[i]).delay(i*3000).fadeIn(2000,function() {
            $(this).fadeOut(1000)); // using the callback version of this method is much cleaner
        });
        i++;
    }
}


回答3:

The problem could be this line:

setInterval(faderepeat(c),20000);

You cannot pass parameter to callback function this way, try this:

setInterval(faderepeat,20000);

function faderepeat(){  
  var c = $(".test p").length;    
  var i = 0;
  while (i<=c) {
var p = $(".para");
($(p[i]).delay(i*3000).fadeIn(2000).fadeOut(1000));
  i++;
    }
}

Move var c =$(".test p").length into faderepeat to always get the latest value.