JavaScript函数节流和函数去抖知识点学习


Posted in Javascript onJuly 31, 2018

概念

节流 (throttle) 让一个函数不要执行的太频繁,减少执行过快的调用,叫节流

去抖 (debounce) 去抖就是对于一定时间段的连续的函数调用,只让其执行一次

throttle 应用场景

  • DOM 元素的拖拽功能实现(mousemove)
  • 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
  • 计算鼠标移动的距离(mousemove)
  • Canvas 模拟画板功能(mousemove
  • 搜索联想(keyup
  • 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次

debounce 应用场景

每次 resize/scroll 触发统计事件

文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)

函数去抖的实现

我们以scroll事件为例,探究如何是实现滚动一次窗口打印一个hello world 字符串。 如果不对其节流或者去抖:

window.onscroll = function () {
 console.log('hello world');
}

这样每滚动一次,实际上会打印多个 hello world。 函数去抖背后的思路是指,某些代码不可能在没有间断的情况下连续执行。创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

《高程三》给出了最简洁最经典的去抖代码,如下:

function debounce(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function() {
 method.call(context);
 }, 1000);
}

function print() {
 console.log('hello world');
}

window.onscroll = function() {
 debounce(print);
};

再做一些改动

function debounce(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) clearTimeout(tId);
  tId = setTimeout(function () {
   action.apply(context, arg);
  }, delay);
 }
}

window.onscroll = debounce(1000, print);

函数节流的实现

函数节流就是让连续执行的函数,变为固定时间段间断地执行。 大概有两种方式实现。

其一使用时间戳来判断是否已经到回调执行时间,记录上次执行的时间戳,然后每次触发事件时执行回调,回调中判断当前时间戳距离上次执行时间戳的时间间隔是否有*s,如果是,则执行,并更新上次执行的时间戳,如此循环。

var throttle = function(delay, action) {
 var last = 0;
 return function() {
  var curr = new Date();
  if (curr - last > delay) {
   action.apply(this, arguments);
   last = curr;
  }
 }
}

第二种方法是使用定时器,比如,当scroll事件刚触发时,打印一个hello world ,然后设置一个1000ms的定时器,此后每次触发scroll事件,触发回调,如果已经存在定时器,则回调不执行方法,知道定时器出发,handler被清除,然后重新设置定时器。

var throttle = function(delay, action) {
 var timeout;
 var later = function () {
  timeout = setTimeout(function(){
   clearTimeout(timeout);
   // 解除引用
   timeout = null;
  }, delay);
 };
 later();
 if (!timeout) {
  action.apply(this, arguments);
  later();
 }
}

更新方法:

function throttlePro(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) return;
  tId = setTimeout(function () {
   action.apply(context, arg);
   clearTimeout(tId);
   // setTimeout 返回一个整数,clearTimeout 之后,tId还是那个整数,setInterval同样如此
   tId = null;
  }, delay);
 }
}
Javascript 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
基于Jquery的简单&简陋Tabs插件代码
Feb 09 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 #Javascript
微信网页授权并获取用户信息的方法
Jul 30 #Javascript
axios简单实现小程序延时loading指示
Jul 30 #Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 #Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 #Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 #Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 #Javascript
You might like
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php语法检查的方法总结
2019/01/21 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
在Vue中使用Compass的方法
2018/03/02 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python3.7.0的安装步骤
2018/08/27 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
高三政治教学反思
2014/02/06 职场文书
策划总监岗位职责
2014/02/16 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
实习单位鉴定评语
2014/04/26 职场文书
正科级干部考察材料
2014/05/29 职场文书
小学教师师德整改措施
2014/09/29 职场文书
自查自纠工作总结
2014/10/15 职场文书