javascript - 避免setTimeOut循环多个实例

我有一个像这样的功能：

https://jsfiddle.net/pjngaffo/1/

i=0;
function refreshInfos() {
    if($('.main_dialog').length > 0) {
            console.log('loop-->',i++);
        setTimeout(function(){refreshManager()},1000);
    }
}

$('.main_dialog').on('click',function(){
    refreshInfos();
});

function refreshManager(){
//do stuff
//then call refreshInfos() for automatisation purposes
refreshInfos();
}

如您所见，如果我单击按钮“单击->控制台”，则会有功能refreshInfos()的多个实例。

我的问题是，如何调用该函数（在需要的任何地方）以使其他实例停止/销毁？

最佳答案

当@priyadarshi swain回答时，您需要使用clearTimeout()

第一个：将setTimeout()保存到全局变量，以便稍后清除计时器

第二个：创建另一个函数来停止计时器并将i变量也重置为0

第三：运行计时器功能之前，您需要始终调用停止计时器功能

这是你可以做到的

var i = 0 , timer = 0;   // set timer as a global variable
function refreshInfos() {
    if($('.main_dialog').length > 0) {
        console.log('loop-->',i++);
        timer = setTimeout(function(){refreshManager()},1000);  // save it to timer variable
    }
}

// another function to stop the timer
function StoprefreshInfos(){
  clearTimeout(timer);  // clear the timer
  i = 0;   // reset i variable to 0
}
$('.main_dialog').on('click',function(){
  StoprefreshInfos();  // run the stop timer function before refresh info function
  refreshInfos();  // then run the refresh info function
});

// button click to just test and stop the timer
$('.stop').on('click',function(){
  StoprefreshInfos();  // stop the timer function
});

function refreshManager(){
//do stuff
//then call refreshInfos() for automatisation purposes
refreshInfos();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main_dialog' style="border:1px solid #333">

  click -> console

</div>
<div class='main_dialog' style="border:1px solid #333">

  click -> console

</div>
<button class="stop">Stop Timer</button>

  注意：当refreshInfos();在refreshManager()内部运行时，您正在使用setTimeout(function(){refreshManager()},1000);
  代码会刷新refreshInfos();，所以我没有找到一种好的方法
  清除refreshInfos();函数中的计时器..而我
  创建另一个函数来停止计时器