Question

当我点击时，我有一个按钮，ul标签会显示阻止我希望ul内的数据会在10秒后自动刷新。数据来自api我需要点击。
单击停止按钮时，数据将不会刷新。

function dummy(){ 
    setTimeout("checkalerts()",10000); 
} 

function checkalerts() { 
    $.ajax({
      method: "POST",
      url: "/messages/get/"+contactid,
      data: { since: since }
    })
      .done(function( msg1 ) {

      var el = $('<li class="message right appeared">
<div class="avatar"><img src="'+url+'/service/getUserImage/'+msg1[i].userID +'/60"/></div>
<div class="text_wrapper">
<div class="text">'+msg1[i].message+'</div></div></li>');
                 $(".chat_window ul").append(el);

    });

    }

Answer 1

跟踪当前setTimeout。它会返回一个ID，也可以再次取消：MDN

在你的ajax成功回调中，只需再次设置超时并保存ID。按停止按钮时，取消超时。

// assign to the start button
function dummy() {  
  fetch();
}

// assign to stop button
function stop() {
    clearTimeout(timeoutId);
}

function fetch() {
// do your ajax stuff here
  output.innerHTML = 'fetched ' + new Date().getSeconds();

  // and in the success callback, reset time timeout
  timeoutId = setTimeout(fetch, 1000);
}

btnStart.addEventListener('click', dummy);
btnStop.addEventListener('click', stop);

工作演示：Fiddle

如何自动刷新div每10秒一次，点击按钮后停止？

1 个答案: