有个叫函数节流的东西

wuyangnju 发布于2019-08-21 10:30 / 1928人阅读

摘要：为了解决这个问题，我们只能通过减少执行函数的次数来提高响应速度。时间间隔内若再次触发事件，则重新计时，直到停止时间大于或等于才执行函数。

某些场景下，比如响应鼠标移动或者窗口大小调整的事件，触发频率比较高。若处理函数稍微复杂，需要较多的运算执行时间，响应速度跟不上触发频率，往往会出现延迟，导致假死或者卡顿感。

为了解决这个问题，我们只能通过减少执行函数的次数来提高响应速度。

throttle 和 debounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略。

throttle 等时间间隔执行函数。

debounce 时间间隔 t 内若再次触发事件，则重新计时，直到停止时间大于或等于 t 才执行函数。

throttle

/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  执行间隔，单位是毫秒（ms）
*
* @return {Function}     返回一个“节流”函数
*/
function throttle(fn, threshhold) {
  // 记录上次执行的时间
  var last
  // 定时器
  var timer
  // 默认间隔为 250ms
  threshhold || (threshhold = 250)
  // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
  return function () {
    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments
    var now = +new Date()
    // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
    // 执行 fn，并重新计时
    if (last && now < last + threshhold) {
      clearTimeout(timer)
      // 保证在当前时间区间结束后，再执行一次 fn
      timer = setTimeout(function () {
        last = now
        fn.apply(context, args)
      }, threshhold)
    // 在时间区间的最开始和到达指定间隔的时候执行一次 fn
    } else {
      last = now
      fn.apply(context, args)
    }
  }
}

调用方法

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

debounce

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

调用方法

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

云服务器 GPU云服务器函数节流 js函数节流服务器的东西删除怎么网购买东西的步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85644.html

聊聊Tomcat的架构设计

摘要：本篇文章主要是跟大家聊聊的内部架构体系，让大家对有个整体的认知。方法会创建一个对象，调用它的方法将字节流封装成对象，在创建组件时，会将组件添加到组件中组件而组件在连接器初始化时就已经创建好了目前为止，只有一个实现类，就是。微信公众号「后端进阶」，专注后端技术分享：Java、Golang、WEB框架、分布式中间件、服务治理等等。老司机倾囊相授，带你一路进阶，来不及解释了快上车！ T...

cnio 2019-08-16 17:46 评论0 收藏0
来！我们一起来从头开始构建自己的JavaScript模块化工具

摘要：能达到一个积木块模块的要求。接下来我们将改进它。结尾到此，我们自己构建了一个很实用的模块化工具，项目的源码在这里，喜欢的话，给个。前言希望编写程序能像玩积木一样，首先规划要产出怎样的作品，然后在积木堆中挑选合适的积木块，最后一组合就完工了。于是JavaScript需要类似这样模块化，每个模块都隐藏内部细节并且对外暴露接口，再处理好模块之间的依赖关系，就可以达到玩积木的效果了。虽...

AaronYuan 2019-08-19 18:26 评论0 收藏0
Javascript事件代理の真理

摘要：参考资料事件代理很久很久以来，总感觉事件发生与事件代理到之间没什么鸟区别。要搞清楚什么是事件代理，就需要先搞清楚什么是代理。，怎么从字面来理解事件代理一词的含义后文有讲。于是，看了事件代理的资料。这一过程被称为事件冒泡。参考资料：js-事件代理很久很久以来，总感觉事件发生与事件代理到之间没什么鸟区别。最近，又看了一下，感觉区别其实真不大！看怎么理解吧。要搞清楚什么是事件代理，就...

lijy91 2019-08-19 17:32 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（上）

摘要：写着写着发现会写不少内容全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧下篇写完啦，感兴趣的朋友可以继续关注开发仿旅游站项目总结下温馨提示此文章，仅是做完项目后的个人觉得可以总结下来的操作思路，接触不久的朋友应该会有收获。写着写着发现会写不少内容... 全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧...下篇写完啦，感兴趣的朋友可以继续关注 => Vue开发仿旅游站we...

church 2019-08-23 13:11 评论0 收藏0