清除选择更改(）的超时

clear timeout on select change()

本文关键字：超时 选择 清除      更新时间：2023-09-26

我需要使用 AJAX 每 5 秒从数据库中获取和显示一次数据，为此我使用递归setTimeout，类似于下面的代码

var timerId = setTimeout(function tick() {
  alert( "tick" );
  timerId = setTimeout(tick, 2000);
}, 2000);

此外，我的页面上有 3 个过滤器（select元素），#books-filter, #authors-filter, #stores-filter每次我在选择列表中选择某个选项或更改我的选择时，我都需要清除超时并用新的 5 秒再次设置它，并在 5 秒后获取新数据。

我在下面的代码 

$(document).ready(function() {

"use strict"
  var $body = $('body');
  function filterBooks() {
    var start = null,
      interval = 2000;
function select() {
  $("#books-filter, #authors-filter, #stores-filter").change(function() {
    clearTimeout(start);
    timer();
  });
}
select();
function timer() {
  start = setTimeout(function tick() {
    start = setTimeout(tick, interval);
    filter();
  }, interval);
}
timer();
function filter() {
  var $form = $('#filter');
  var url = $form.attr('action');
  var data = $form.serialize();
  if(data !== '') {
    $.ajax({
    type: 'post',
    url: url,
    data: data,
    dataType: 'json',       
    error: function(response){
    },
    success: function(response) {
      //console.log(response);
        }
      }); 
    }
  }
}
  filterBooks();
});

但我不确定，clearTimeout会这样工作吗？

看，如果您希望某个函数以一定的时间间隔多次执行，您将从该方法中受益更多setInterval()：

function retrieveMyData() {
    // your ajax stuff
}
var myInterval = setInterval(retrieveMyData, 5000);

然后，当更改事件在select元素上触发时，只需重新启动间隔即可

$(document).on('change', '#your-target-select', function () {
    clearInterval(myInterval);
    myInterval = setInterval(retrieveMyData, 5000);
});

正如 markoffden 所说，您可以考虑改用间隔，因为它是实现周期循环的直接函数。但要回答你的问题： 只要您可以检索相应超时的 ID，clearTimeout就可以在侦听器中使用。下面是一个全局存储当前超时的示例，其中包含一个标志和用于在超时循环之间切换的按钮：http://codepen.io/clemeno/pen/aNmzdm

相关文章：