如何在前一个结束之后执行一个函数?

Question

伙计们。这是一个计时器。我想运行计时器，当它结束时做其他事情(如警告(，然后用其他分钟数再次运行。但是我不能因为总是只执行第二个调用：

$(document).ready(function() {
timer(5,timer(25));
// timer(5);
// timer(25); do not work... only exec de last one

});
function timer(countTo,callback){
	var time = 10; /* how long the timer runs for */
	var initialOffset = '440';
	var i = 1
	var interval = setInterval(function() {
	    $('.circle_animation').css('stroke-dashoffset', initialOffset-(i*(initialOffset/countTo)));
	    $('h2').text(i);
	    if (i == countTo) {
	        clearInterval(interval);
	    }
	    i++;  
	}, 1000);
	callback();
}

哪个是最好的解决方案？有些事情我不明白...无论如何，谢谢！

Answer 1

首先：

timer(5,timer(25));

如果你认为这一行会执行timer(5)，然后在timer(5)结束时它会执行timer(25)，那你就错了。 这实际上会立即计算timer(25)，并将其返回值(undefined(作为第二个参数传递给timer(5,undefined)。

如果您打算将其作为回调传递，则需要传递一个函数。 所以你可以做：

timer(5,timer.bind(null,25));

但是，就此而言，您甚至不会在尝试调用它之前检查callback是否存在，因此无论如何您都可能会收到引用错误。

Answer 2

timer(5,timer(25));

启动两个计时器，并将第二个(未定义(的结果作为回调传递给第一个计时器。你想要：

timer(5,timer.bind(window,25));

并且如果i==countTo...

Answer 3

这是你想要的吗？

timer(5,function(){timer(25)});

Answer 4

你的问题在这里：

timer(5,timer(25));

你应该输入

timer(5, function(){
timer(25)
});
//or using ES6 syntax
timer(5, () => timer(25));

因为timer(25)返回其值(此函数不返回值，因此它尝试调用 undefined(，而不是该函数。 另请阅读有关关闭的信息，这可能会有所帮助。

Answer 5

不是运行callback()，而是需要运行函数本身(timer()(。您还需要在函数内运行一个for循环，以检查函数已经运行了多少次。如果它达到您想要的最大值，请突破它。这样它就不会无限期地运行。

在下面的示例中，timer()函数执行五次，这就是我假设您通过调用timer(5)来想要的。

$(document).ready(function() {
timer(5);
});
function timer(countTo) {
for (var iterations = 0; iterations < countTo; iterations++) {
var time = 10; /* how long the timer runs for */
var initialOffset = '440';
var i = 1
var interval = setInterval(function() {
$('.circle_animation').css('stroke-dashoffset', initialOffset - (i * (initialOffset / countTo)));
$('h2').text(i);
if (i == countTo) {
clearInterval(interval);
}
}, 1000);
timer();
console.log("Iteration:", iterations + 1);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

要在此之后运行该函数 25 次，您所要做的就是在timer(5)之后直接调用timer(25)：

$(document).ready(function() {
timer(5);
timer(25);
});

$(document).ready(function() {
timer(5);
timer(25);
});
function timer(countTo) {
for (var iterations = 0; iterations < countTo; iterations++) {
var time = 10; /* how long the timer runs for */
var initialOffset = '440';
var i = 1
var interval = setInterval(function() {
$('.circle_animation').css('stroke-dashoffset', initialOffset - (i * (initialOffset / countTo)));
$('h2').text(i);
if (i == countTo) {
clearInterval(interval);
}
}, 1000);
timer();
console.log("Iteration:", iterations + 1);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望这有帮助！ :)