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

博客地址: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

原文地址:https://www.cnblogs.com/ainyi/p/11782892.html

时间: 2024-10-05 05:07:53

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

详谈js防抖和节流

本文由小芭乐发表 0. 引入 首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>没有防抖</title> <style type="text/css"></sty

闲聊前端性能----防抖、节流、重绘与回流。

在最近,小米9卖的特别火,在官方抢购的时候基本都是一点既空.这不禁让我想到了,官网是怎样控制顾客不停点击发起请求而不导致官网崩溃的呢?这由此引出了前端性能的优化中的----防抖和节流.在闲聊完后你就会发现有些时候在抢购商品的时候,你用鼠标在几秒钟不停的按了数十次,或许它仅仅是发送了你第一次点击抢购的那个请求.所以说 抢购时间内的第一次点击尤为关键! 下面来介绍一下什么是防抖!        防抖:任务频繁触发的情况下,只有任务触发的间隔超过制定的时间间隔的时候,任务才会被执行. 下面引用一下知乎

JS的防抖和节流

数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它被触发的频次非常高,间隔很近.如果事件中涉及到大量的位置计算.DOM 操作.元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成,就会造成浏览器掉帧.加之用户鼠标滚动往往是连续的,就会持续触发 scroll 事件导致掉帧扩大.浏览器 CPU 使用率增加.用户体验受到影响.尤其是在涉及与

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

Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 TCP 三次握手与四次挥手 浏览器渲染页面 在本文中,jsliang 会讲解通过自我探索后关于上述知识点的个人理解,如有纰漏.疏忽或者误解,欢迎各位小伙伴留言指出. 如果小伙伴对文章存有疑问,想快速得到回复. 或者小伙伴对 jsliang 个人的前端文档库感兴趣,也想将自己的前端知识整理出来. 欢迎

JS防抖和节流

对防抖和节流的一些理解,做一次记录.(之前项目中的需求是在输入框中输入内容之后,调接口返回值,然后不知道还有节流这波操作,然后就写了判断当鼠标失去焦点的时候调接口,后来大佬说可以使用节流来实现) 防抖和节流算起来应该属于性能优化的知识,但是处理不当或者是放任不管就容易引起浏览器卡死.就是在绑定scroll.resize这类事件时,当他发生时,被触发的频率非常高,间隔很近.如果事件中涉及到大量的位置计算.DOM操作.元素重绘等工作且这些工作无法在下一个scroll事件触发前完成,就会造成浏览器调帧

来聊聊JavaScript中的防抖和节流

目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html> <head> <meta charset="utf-8"> <title>问题演示</title> </head> <body> <script type="text/javascript&qu

JavaScript防抖和节流

JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html> <head> <meta charset="utf-8"> <title>问题演示</title> </head> <body> <script type="text/javascript"> window.onload = function(){ // 没有处理防抖和节流的代码

前端进击的巨人(八):浅谈函数防抖与节流

本篇课题,或许早已是烂大街的解读文章.不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(-面试官-)深意的笑容之下,权当温故知新. JavaScript的执行过程,是基于栈来进行的.复杂的程序代码被封装到函数中,程序执行时,函数不断被推入执行栈中.所以 "执行栈" 也称 "函数执行栈". 函数中封装的代码块,一般都有相对复杂的逻辑处理(计算/判断),例如函数中可能会涉及到 DOM 的渲染更新,复杂的计算与验证, Ajax 数据请求等等. 前端页面的操作权,大部分

javascript中的防抖与节流。

1.什么是防抖?它有什么作用? 什么是防抖?相信行入门的小白,甚至做了一段时间的程序员也不太理解是什么意思,我也是听了公开课才了解一点,现在和大家分享一下我的理解! 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.比如,在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕,请求的次数多了浏览器会造成卡