前端优化中的防抖与截流

1. 什么是防抖？

在事件触发后的指定时间之后，再去执行真正需要执行的函数，如果在该时间之内事件又被触发，则重新开始计时。

常见的应用场景：

1. 滚动事件触发；

2. 搜索框输入查询；

3. 表单验证；

4. 按钮提交事件；

5. 浏览器窗口缩放；

以下是代码实现：

function debounce(func, time, immediate) {// 用来获取返回值let timer, result;let debounced = function () {// 保存当前指向let that = this;// 获取函数的参数let args = arguments;// 清除当前定时器clearTimeout(timer);// 立即执行if (immediate) { let callNow = !timer;// 指定时间内不再执行timer = setTimeout(function () {timer = null;}, time);if (callNow){result = func.call(that, ...args);};// 不立即执行} else { // 指定时间后触发函数timer = setTimeout(function () {// 改变函数内部指向，并传递参数func.call(that, ...args);}, time);};return result;};// 取消函数debounced.cancel = function () {// 清除定时器clearTimeout(timer); // 定时器置空timer = null; };// 返回防抖函数return debounced;
}

2. 什么是截流？

在指定时间内触发多次函数的话，只有一次是可被执行的，下一次执行只能等到下一个周期里。

常见的应用场景：

1. DOM元素的拖拽功能实现；

2. 射击游戏；

3. 计算鼠标的移动距离；

4. 监听滚动事件；

截流函数根据是否立即执行，操作完成后是否还会执行一次，分为三种情况：

1. 用时间戳来实现。第一次立即执行，操作完成后不再执行；

function throttle(func, time) {let that, args;let old = 0;return function () {// 获取当前的时间戳let now = new Date().valueOf(); // 保存当前指向that = this; // 获取函数的参数args = arguments; if (now - old > time) {// 改变函数内部指向，并传递参数func.apply(that, args); // 更新旧时间戳old = now; }}
};

2. 用定时器实现节流函数。第一次延时执行，操作完成后还会执行一次；

function throttle(func, time) {let that, args, timer;return function () {// 保存当前指向that = this;// 获取函数的参数args = arguments;if (!timer) {timer = setTimeout(function () {timer = null;func.apply(that, args);}, time);}}
};

3. 用时间戳与定时器结合实现截流函数。第一次立即执行，操作完成后还会执行一次；

function throttle(func, time) {let that, args, timer;let old = 0; return function () {// 保存指向that = this;args = arguments;let now = new Date().valueOf(); if (now - old > time) {if (timer) {clearTimeout(timer);timer = null;}func.apply(that, args);old = now;};if (!timer) {timer = setTimeout(function () {// 更新最新的时间戳old = new Date().valueOf(); timer = null;func.apply(that,args);}, time);}}
}

最终版，用时间戳与定时器结合实现截流函数。根据参数来决定开始是否立即执行，结束后是否还会执行。

function throttle(func, time, options) { let that, args, timer;// 设置初始时间戳let old = 0; // 如果没有该参数，置为空对象if(!options){options = {}}; return function () {that = this;args = arguments;// 获取初始的时间戳let now = new Date().valueOf(); // leading为false表示不立即执行if (options.leading === false && !old) {old = now; };if (now - old > time) { if (timer) {clearTimeout(timer);timer = null;}func.apply(that, args);old = now;};// trailing为true表示最后一次会被执行if (!timer && options.trailing==true) { timer = setTimeout(function () {// 更新最新的时间戳old = new Date().valueOf(); timer = null;func.apply(that,args);}, time);}}
}

前端优化中的防抖与截流相关推荐

Vue中使用防抖与截流
Vue中使用防抖与截流何为防抖/节流防抖(debounce) 节流(throttle) 页面使用使用场景何为防抖/节流首先先说说何为防抖与节流防抖(debounce) 防抖就是一段时间内会 ...
关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）...
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
vue中使用防抖和截流
今天,在项目开发工程中需要使用防抖,下面跟大家分享下防抖和截流的基础知识,顺便分享一个踩到的坑. 一.防抖直接上代码看的清楚: /*** 防抖* @param {Function} fn* @par ...
前端优化中使用base64的优缺点
优点 (1)base64格式的图片是文本格式,占用内存小,转换后的大小比例大概为1/3,降低了资源服务器的消耗: (2)网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访 ...
前端优化系列之一：dns预获取 dns-prefetch 提升页面载入速度
问题:怎么做到dns域解析? 用于优化网站页面的图片问题:怎么提升网站性能? dns域解析,是提升网站的一个办法. DNS Prefetch,即DNS预获取,是前端优化的一部分. 一般来说,在前端优 ...
[前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化
在前端优化中,js.css等文件的优化一般都是压缩的优化,进行合并.减小体积以达到减小请求的目的. 今天发现了一个集成在VS中的压缩插件,使得压缩变得比较快捷. 配置方法首先需要去下载Microso ...
前端优化之DNS预解析
前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少D ...
06_前端优化系列之一_DNS预获取dns-prefetch提升页面载入速度
title: 前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 urlname: 06_前端优化系列之一_DNS预获取dns-prefetch提升页面载入速度 date: 2 ...
前端优化系列之DNS预获取 dns-prefetch 提升页面载入速度
前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少D ...

前端优化中的防抖与截流

1. 什么是防抖？

2. 什么是截流？

前端优化中的防抖与截流相关推荐

最新文章

热门文章