2018.06.22 17:05

函数节流

如果你已经对用户输入进行了任何形式的验证,onkeypress那么你会知道有时候你想要限制你的函数运行的次数。一个很好的例子就是基于Ajax的用户名验证 - 你不想在每次按键时按下服务器,因为大多数用户将能够在大约1/10秒内写出他们的名字,所以你应该调节ajax请求直到输入处于休眠状态100ms。


因此,通过使用JavaScript提供的一些有用的闭包 JavaScript,我们可以创建一个简单的方法来处理这个问题:

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

因此,如果您使用jQuery进行某项操作,例如按键验证,则可以这样做:

$('input.username').keypress(debounce(function (event) {
  // do the Ajax request
}, 250));

关键字this是你所期望的输入,并且所有正确的参数都被传递给事件句柄,即它的工作方式与你所期望的完全相同,除非它只在keypress事件空闲250ms后触发(在这个特定案件)。

下面是一个实际的油门功能,默认情况下每250ms触发一条消息(而不是在一连串事件结束时):

function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last &amp;&amp; now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

所以当你使用这个时,移动鼠标会在你第一次移动时回应出滴答,但是每隔1秒钟,直到你停止移动鼠标:

$('body').on('mousemove', throttle(function (event) {
  console.log('tick');
}, 1000));

DIY表情

(添加http或https协议)

提交评论