博客地址:https://ainyi.com/79

日常浏览网页中,在进行窗口的 resize、scroll 或者重复点击某按钮发送请求,此时事件处理函数或者接口调用的频率若无限制,则会加重浏览器的负担,界面可能显示有误,服务端也可能出问题,导致用户体验非常糟糕

此时可以采用 debounce(防抖)和 throttle(节流)的方式来减少事件或接口的调用频率,同时又能实现预期效果

防抖:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在 delay 时间后触发函数,但是在 delay 时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发

节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数

区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在连续触发的事件后才触发最后一次事件的函数

上面的解释,摘抄网上的解答

防抖

debounce:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时

如下图,持续触发 scroll 事件时,并不执行 handle 函数,当 1000ms 内没有触发 scroll 事件时,才会延时触发 scroll 事件

function debounce(fn, wait) {
let timeout = null
return function() {
if(timeout !== null) {
clearTimeout(timeout)
}
timeout = setTimeout(fn, wait)
}
}
// 处理函数
function handle() {
console.log('处理函数', Math.random())
} // 滚动事件
window.addEventListener('scroll', debounce(handle, 1000))

节流

throttle:当持续触发事件时,保证一定时间段内只调用一次事件处理函数

仔细了解了才知道,我以前刚学前端的时候,做 banner 图特效,两边的点击按钮如果一直重复点击就会出问题,后面摸索了此方法,原来这名字叫做节流

如下图,持续触发 scroll 事件时,并不立即执行 handle 函数,每隔 1000 毫秒才会执行一次 handle 函数

时间戳方法

let throttle = function(func, delay) {
let prev = Date.now()
return function() {
let context = this
let args = arguments
let now = Date.now()
if(now - prev >= delay) {
func.apply(context, args)
prev = Date.now()
}
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', throttle(handle, 1000))

定时器方法

let throttle = function(func, delay) {
let timer = null
return function() {
let context = this
let args = arguments
if(!timer) {
timer = setTimeout(function() {
func.apply(context, args)
timer = null
}, delay)
}
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', throttle(handle, 1000))

时间戳+定时器

let throttle = function(func, delay) {
let timer = null
let startTime = Date.now()
return function() {
let curTime = Date.now()
let remaining = delay - (curTime - startTime)
let context = this
let args = arguments
clearTimeout(timer)
if(remaining <= 0) {
func.apply(context, args)
startTime = Date.now()
} else {
timer = setTimeout(func, remaining)
}
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', throttle(handle, 1000))

每个请求必须发送的问题

如下图的购买页,操作发现一个购买明细的查价接口的频繁调用问题

如下图:

购买页改变任何一个选项,都会调用查价接口,然后右边会显示对应的价格。尤其是购买数量,这是一个数字选择器,如果用户频繁点击 + 号,就会连续调用多次查价接口,但最后一次的查价接口返回的数据才是最后选择的正确的价格

每个查价接口逐个请求完毕的时候,右边的显示价格也会逐个改变,最终变成最后正确的价格,一般来说,这是比较不友好的,用户点了多次后,不想看到价格在变化,尽管最终是正确的价格,但这个变化的过程是不能接受的

也不应该使用上面的防抖解决方式,不能设置过长的定时器,因为查价接口不能等太久,也不能设置过短的定时器,否则会出现上面说的问题(价格在变化)

所以这是一个每个请求必须发送,但是只显示最后一个接口返回的数据的问题

我这里采用入栈、取栈顶元素比对请求参数的方法解决:

// 查价
async getPrice() {
// 请求参数
const reqData = this.handleData()
// push 入栈
this.priceStack.push(reqData)
const { result } = await getProductPrice(reqData)
// 核心代码,取栈顶元素(最后请求的参数)比对
if(this.$lang.isEqual(this.$array.last(this.priceStack), reqData)) {
// TODO
// 展示价格代码...
}
}

注解,上述的 this.$lang.isEqual、this.$array.last 均是 lodash 插件提供的方法

注册到 Vue 中

import array from 'lodash/array'
import Lang from 'lodash/lang' Vue.prototype.$array = array
Vue.prototype.$lang = Lang

博客地址:https://ainyi.com/79

防抖与节流 & 若每个请求必须发送,如何平滑地获取最后一个接口返回的数据的更多相关文章

  1. 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据, 以及 post 请求返回 404 但后台能收到数据

    1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...

  2. 【转载】jmeter将上一个接口返回值作为下一个接口的请求参数

    第一:通过JSON Extractor 插件来提取JSON响应结果 原文地址:http://blog.csdn.net/dreamtl/article/details/68957122 接口响应结果, ...

  3. jmeter将上一个接口返回值作为下一个接口的请求参数

    在jmeter中有时候会用到,将上一个接口的返回值作为下一个接口的请求参数 具体操作如下: 1.首先新建一个http请求(右键线程组--添加Sampler--http请求),同时添加好接口相应的请求参 ...

  4. 给AFNetworking添加请求缓存功能实现在没有网络的情况下返回缓存数据

    原理:先给NSURLSession地Configuration设置一个内存和本地代理,原来的网络请求结束后会查找缓存的代理字典,并执行代理对象对应的操作方法,需要做的就是拦截错误的方法,返回缓存的数据 ...

  5. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

  6. 详谈js防抖和节流

    本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html ...

  7. JS的防抖和节流

    数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它 ...

  8. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  9. React 实现input输入框的防抖和节流

    1.为什么使用防抖和节流对于频繁触发的事件 比如keydown keyup事件 当频繁点击时候 会多次触发事件 页面出现卡顿 影响性能 2.函数防抖(debounce):间隔时间内只执行一次   函数 ...

随机推荐

  1. Android之SOAP协议与WebService服务器交互,解决超时的问题

    网络搜索大部分不能实际解决问题.特意将解决方法写下.创建MyAndroidHttpTransport 类 , package com.example.omhandroid.lib; import or ...

  2. 使用Espresso测试记录

    准备工作 建立测试项目 添加测试依赖 编写Espresso测试 运行测试并检查测试结果 建立测试项目 使用Android Studio建立测试项目,Activity模版使用 LoginActivity ...

  3. 给定一个公式字符串用java进行拆解并计算结果

    需求很简单,给定一个字符串形式的公式规则,用java代码进行拆解,并能计算出结果. ♦考虑字符串中数字格式[整数.小数点] ♦考虑字符串中运算符[+-*/()] ♦考虑空格.运算规则[被0除] 以下是 ...

  4. SUSE Ceph 增加节点、减少节点、 删除OSD磁盘等操作 - Storage6

    一.测试环境描述 之前我们已快速部署好一套Ceph集群(3节点),现要测试在现有集群中在线方式增加节点 如下表中可以看到增加节点node004具体配置 主机名 Public网络 管理网络 集群网络 说 ...

  5. java架构之路-(面试篇)Mysql面试大全

    说一下mysql比较宏观的面试,具体咋写sql的这里就不过多举例了.后面我还会给出一个关于mysql面试优化的试题,这里主要说的索引和B+Tree结构,很少提到我们的集群配置优化方案. 1.索引是什么 ...

  6. 从零开始入门 K8s | 应用存储和持久化数据卷:核心知识

    作者 | 至天 阿里巴巴高级研发工程师 一.Volumes 介绍 Pod Volumes 首先来看一下 Pod Volumes 的使用场景: 场景一:如果 pod 中的某一个容器在运行时异常退出,被 ...

  7. flask+阿里云短信服务实现注册发送手机验证码

    效果图: 该效果主要讲解实现通过调用阿里云的SDK实现发送注册验证码短信(阿里云短信付费使用) 购买阿里云短信服务 购买链接:https://www.aliyun.com/product/sms 1. ...

  8. MongoDB 学习笔记之 手动预先分片

    手动预先分片: 目的:手动预先分片是为了防止未来chunk的移动,减少IO. sh.shardCollection("shop.users",{"userId" ...

  9. linux shell 统计当前目录下的文件个数

    shell 统计当前目录下文件个数,使用管道组合命令: ls -1 | wc -l 解释: ls -1 表示一行一个列出文件名. wc -l 表示打印统计的行数. 两个命令通过管道连在一起表示打印列出 ...

  10. springboot结合jpa

    idea中新建springboot项目,引入spring-boot-starter-data-jpa依赖 application.yml中配置数据库连接,示例如下: spring: datasourc ...