javascript通过计时器观察变量更改

Question

我有一个幻灯片放映，下一张图片每10秒加载一次。一旦图像加载，它等待10秒（setTimeout），然后调用淡出它的函数，然后再次调用该函数淡入下一个图像。它无限期地重复。

这很有效。

然而，有时候，我会想要覆盖这个“function1 call - ＆gt; pause - ＆gt; function2 call - ＆gt; function1 call”这个函数之外的循环（例如，我可以点击幻灯片＃并希望直接跳到该幻灯片并取消当前暂停。

一个解决方案似乎是设置变量，允许其他事件更改该变量，然后在我的原始函数链中，在继续循环之前检查是否有任何更改。

我有这个设置：

 var ping = 500;
 var pausetime = 10000;
 for(i=0; i<=pausetime; i=i+ping){
     setTimeout(function(){
         console.log(gocheckthevariable());
         console.log(i);
         pseudoIf('the variable is true AND the timer is done then...do the next thing')
     },i)
 }

我的想法是我要暂停10秒钟。在这个暂停期间，每隔半秒我会检查一下是否应该停止。

上面将每隔半秒向控制台写一次：

true
10000
true
10000
true
10000
etc...

但我想要/需要的是：

true
0
true
500
true
1000
etc...

基本问题是for循环在每个设置超时之前执行。虽然我可以每半秒检查变量的值，但我无法将其与当前循环索引相匹配。

我确信这是一个常见的问题，但我不知道我应该寻找什么。