Question

我正在通过ajax调用加载的页面中执行setTimeout函数。但如果我再次点击链接加载页面，我恐怕最后一次setTimeout调用仍在继续，并且setTimeout设置的调用间隔数会执行多次。

试过这是远程页面：

var RefreshInterval = null;
clearTimeout(RefreshInterval);

function someFunction()
{
....
    setNextRefresh();

}

function setNextRefresh() {
    console.log(wifiRadarRefreshInterval);
    RefreshInterval = null;
    clearTimeout(RefreshInterval);
    RefreshInterval = setTimeout('someFunction();', 20*1000);
}

Answer 1

在ajax加载的页面之外声明var RefreshInterval = null;并在页面上使用此代码：

clearTimeout(RefreshInterval);

function someFunction()
{
....
    setNextRefresh();

}

function setNextRefresh() {
    console.log(wifiRadarRefreshInterval);
    clearTimeout(RefreshInterval);
    RefreshInterval = setTimeout('someFunction();', 20*1000);
}

Answer 2

不要使用此

var RefreshInterval = null;
clearTimeout(RefreshInterval);

您实际上是assigning a null and then trying to clear it。哪个不起作用，必须使用clearTimeout并传递分配给setTimeout 的变量来清除超时。在这里，您将最终传递一个null，以便永远不会清除计时器。

以下是一个小样本，可以解决您的问题 JS Fiddle

因此将变量设置为null然后尝试清除它，只需检查变量是否未定义，是否定义清除变量，否则继续。使用下面的代码，您还必须删除前面提到的两行

   function setNextRefresh() {

     console.log(wifiRadarRefreshInterval);

     if (typeof RefreshInterval !== 'undefined') {
       clearTimeout(RefreshInterval);
     }

     RefreshInterval = setTimeout('someFunction();', 20*1000);
   }

点击按钮说4次，输出只能打印一次。也就是说，如果ajax调用是4次，则设置的时间必须只执行一次。请查看以下代码段以获取演示

 var clickCount= 0; // just to maintain the ajax calls count

function NewPageSimilator(clicksTillNow) { // this acts as a new page. Let load this entire thing on ajaX call

  if (typeof RefreshInterval !== 'undefined') {
    clearTimeout(RefreshInterval);
  }

  function setNextRefresh() {
    window.RefreshInterval = setTimeout(printTime, 3000); //20*1000
  }

  function printTime() {// dumy function to print time  
    document.getElementById("output").innerHTML += "I was created at click number " + clicksTillNow + '<br/>';
  }
  setNextRefresh();
}

document.getElementById("ajaxCall").addEventListener("click", function() { // this will act as a ajax call by loading the scripts again
  clickCount++;
  NewPageSimilator(clickCount);
});

document.getElementById("clear").addEventListener("click", function() { //reset demo
  clickCount = 0;
  document.getElementById("output").innerHTML = "";
});

<p id="output">

</p>
<button id="ajaxCall">
  AJAX CALL
</button>
<button id="clear">
Clear
</button>

Answer 3

如果我不想在父页面中声明它，这里是我找到的解决方案：

//Clear previously loaded calls if exists
try{    clearTimeout(wifiRadarRefreshInterval); }catch(e){}
var wifiRadarRefreshInterval = null;

function somefunction(){
    ....
    setNextRefresh();
}

function setNextRefresh() {

    try{

        clearTimeout(wifiRadarRefreshInterval);
        wifiRadarRefreshInterval = null;
        wifiRadarRefreshInterval = setTimeout('somefunction();', 20*1000);
    }
    catch(e){
        console.log(e.message + e.stack);
    }   
}

Javascript setTimeout在由ajax加载的页面中触发多次

3 个答案: