jquery - 幻灯片事件的延迟回调函数

Question

我正在使用 jqueryui 的 slider 小部件。
我希望在 slider 的滑动事件上运行一个函数，但我只希望它在(700 毫秒)延迟后运行。如果 slider handle 继续移动(即再次触发滑动)，那么我希望重置延迟超时。

我尝试使用 jquery 的 doTimeout 和 setTimeout 但没有成功。我所做的任何事情似乎都会阻止 slider handle 改变位置。

var heavy = {
    updatesomething: function() {
        //some computationally heavy code
    }
}

$('#slider').slider({
    min:1, max:99, orientation: 'vertical',
    slide: function(event, ui) {
        $(this).doTimeout('timeoutid', 700, function() {
            heavy.updatesomething(this, ui.value);  });
    }
});

Answer 1

使用可用的去抖动实现。下面的例子取自davidwalsh blog 。此外，您可以使用 apply 来调用具有正确上下文和参数的函数，而不是传递上下文，如下所示。

var heavy = {
  updatesomething: function(event, ui) {
    console.log(this);
    console.log(ui);
  }
}

// taken from https://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

$('#slider').slider({
  min: 1,
  max: 99,
  orientation: 'vertical',
  slide: debounce(function(event, ui) {
    heavy.updatesomething.apply(this, arguments);
    //---------------------------^-context  ^-- what it says
  }, 700)
});

<link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="slider"></div>