uniapp 输入框防抖节流_拉动一下控制台大小,后台请求数量爆炸,竟是没做好防抖与节流...

点击上方☝Java编程技术乐园,轻松关注!及时获取有趣有料的技术文章

文章很好,耐心阅读,记得点赞和关注哦~

2afed41d611452d197a3679e57f2a9e0.png

前言

最近有个朋友在面试过程中遇到一个问题:什么是防抖和节流?糟了,这可触碰到我的知识盲区了,好像听也没听过这 2 个东西,痛定思痛,赶紧学习学习。

a877993bfdac2ece2b558d4f23965d61.png

防抖(debounce)

在事件被触发 n 秒之后执行,如果在此期间再次触发事件,则重新开始计时。

乍一看,这不是闲的蛋疼吗?为啥要等 n 秒之后再执行呢?

7150920b82721cb89ee81d95c41203ff.png

本着存在即合理的原则,咱看不懂但咱得去学啊!经过十秒钟的思考,突然想起来之前做过的公司的一个小程序,使用的 mpvue+vant-weapp,van-field 标签并没有和数据进行双向绑定,而是每次都要触发 @input 事件,从而完成数据绑定:

288d8edd4fca24d78d8a3ad07bf43376.png

这就导致了一个问题:

038830d99d7d4a8aa028287d7705e322.png

输一个手机号要触发 11 次事件!!如果是联想搜索的话。。。那画面太美!

我们先自己想一下办法来解决这个问题。

  • 首先我们需要在手机号输入完成之后将数据绑定到 phoneNumber 上然后进行联想搜索,怎么算输入完成呢,输入一个数字到找到下一个数字输入大概需要 1 不到秒,只要用户一秒内没有再次输入,则将输入框内容与 phoneNumber 绑定并进行联想搜索(什么?你说你输入五个字符就停下?不怕后台砍死你)。
  • 准备工具:一个需要触发的函数 debounce、一个定时器、一个输入框、一个判断是否输入完成的函数 getPhone。
  • 基本思路:输入绑定事件 getPhone,输入之后开启1秒定时器,如果在 1 秒内再次进行了输入,则清除之前的定时器,并且重新设置定时器;如果 1 秒内没有输入,则输入结束触发事件 a,进行联想搜索。
// 需要触发的函数function debounce(d){    console.log("联想搜索phoneNumber:" + d)}let inp = document.querySelector("#phone");// 输入触发的事件function getPhone(fn,delay){    let timer;    // 使用闭包,保证每次使用的定时器是同一个    return (d)=>{        clearTimeout(timer);        timer = setTimeout(()=>{            fn(d);            // 结束之后清除定时器            clearTimeout(timer);        },delay)    }}let getPhoneDebounce = getPhone(debounce,1000);inp.addEventListener('keyup',(e)=>{    getPhoneDebounce(e.target.value);})

这时候看输出:

c16b23fc11e2beb10111fa41f3bc46a3.png

是的只输出了一次号码,也就是说不用每次输入都进行一次搜索了。

节流(throttle)

如果持续触发一个事件,则在一定的时间内只执行一次事件。

那么问题来了,既然是持续触发了,那为啥还要设定一定时间内只执行一次呢?废话,你吃鸡为啥不用 AKM 非要去追梦抢狗杂呢?还不是因为 AKM 射速慢(狗杂真香)!

0674f9a6cb260316c1cffb5c608864ed.png

我们来试着做一个 AKM 的设计模拟:

  • 首先第一次点击射击的时候,打出一发子弹,当以极短的时间再次点击射击的时候,由于需要‘冷却’——也就是节流,再次点击无效,当冷却时间过了之后,再次点击射击,则继续下一次射击。
  • 准备工具:一个射击的函数 shot,一个判断射击间隔是否结束的函数 nextShot,一个触发射击的按钮,判断射击是否结束的定时器 timer。
  • 基本思路:第一次点击按钮的时候,触发 shot,当继续点击的时候,射击无效,只有过了定时器设置的时间才可以继续射击。
射击
function shot(){    console.log('射击')}let btn = document.querySelector('#shot');function nextShot(fn,delay){    let timer;    // 闭包原理同上    return ()=>{        // 定时器存在,无法射击        if(timer){            console.log('禁止射击');        }else{  // 定时器不存在,射击,并设置定时器            fn();            timer = setTimeout(()=>{                // 定时器结束,可以射击                clearTimeout(timer);                timer = null;            },delay)        }    }}let start = nextShot(shot,20);btn.addEventListener('click',()=>{    start();})

当我们疯狂点击按钮的时候:

26e2821d5d46799d309db6920c574182.png

可能这个例子不是很突出,我再说个类似的,英雄联盟和DNF的技能冷却应该更适合~

3489eea95fbe100b42349390e43d5767.png

是时候回归一下标题了,免得有人说我可以去 UC 震惊部了!公司的大数据组件目前是只要页面大小发生变化就会重新加载,这就导致了有时候拉一下控制台会发生很多次请求,这个时候就可以用防抖来解决一下了~

作者:.Ping
链接:https://juejin.im/post/5e0d7ab9f265da5d691035b5
来源:掘金

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/567209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux matlab runtime,linux 环境 MATLAB Runtime 安装

安装 MUTsigcv 软件时需要用到MATLAB环境,安装过程如下:环境下载:https://ww2.mathworks.cn/products/compiler/matlab-runtime.html安装帮助:https://ww2.mathworks.cn/help/compiler/install-the-matlab-runtime.html下载安装软…

智能车辆手册 pdf_SIMULINK在虚拟车辆开发方面的应用

获得pdf全文&#xff0c;朋友圈集赞30个好书推荐&#xff1a;1. Radar: 《雷达手册》<推荐理由&#xff1a;中译本在原著的基础上增加了缩略语词汇总表等5个附录&#xff0c;便于读者查阅。原著是集合当今世界雷达各方面造诣最深的专家、学者编撰而成的&#xff0c;受到全世…

无限极 php算法,无限极分类算法,对你一定有帮助

无限级分类是开发中常见的情况,也经常会在面试&#xff0c;主考官问到&#xff0c;笔试中遇到&#xff0c;因此本文对常见的无限极分类算法进行总结归纳&#xff0c;其实大多数就是迭代与递归。1.循环迭代实现$arr [1>[id>1,name>父1,father>NULL],2>[id>2,…

pmp中ram和raci的区别_【PMP知识点总结】采购流程、采购合同的类型、采购合同的条款...

PMP考试的内容&#xff0c;围绕着《PMBOK》开展。《PMBOK》第六版第一部分的第十二章【项目采购管理】&#xff0c;有两个三个高频知识点&#xff08;采购流程和采购合同、索赔&#xff09;。在PMP考试里&#xff0c;通常项目经理是甲方的项目经理&#xff0c;是甲方爸爸&#…

php issign为false,支付宝接口集成及错误排除

我集成了支付宝接口&#xff0c;可以支付成功&#xff0c;可是notify_url.php中始终好像没有回调&#xff0c;所以按照官方文档&#xff0c;我作了以下修改php$verify_result $alipayNotify->verifyNotify();if($verify_result) {//商户订单号$order_id $_POST[out_trade_…

查看队列深度_不为人知的网络编程(十一):从底层入手,深度分析TCP连接耗时的秘密...

“ 本文作者张彦飞&#xff0c;原题“聊聊TCP连接耗时的那些事儿”&#xff0c;本次收录已征得作者同意&#xff0c;转载请联系作者。即时通讯网收录时有少许改动。本文已同步发布于52im社区&#xff1a;http://www.52im.net/thread-3265-1-1.html(1、引言对于基于互联网的通信…

perl python ruby_perl,lua,python,ruby的对比(3) -- lambda,closure,proper tail function call

今天的题目是函数&#xff0c;先看一下匿名函数。Perl里是这样的$f sub{ return $_[0]$_[1]$_[2];};print &$f(1,2,3)."\n";lua里是这样的f function(x,y,z) return xyz endprint (f(1,2,3))python里使用了lambda概念&#xff0c;实现是这样的&#xff0c;也可…

oracle将一个表数据更新时间,Oracle批量更新,将一个表的数据批量更新另一表

【问题】现在有两个千万级别的结构相同数据不同数据表T_SMS_PHONENO(目的表)&#xff0c;T_SMS_PHONENO2(源表)&#xff0c;根据源表数据更新目的表的数据。【分析】根据经验&#xff0c;更新方法一般有以下几种&#xff1a;1、直接update。update T_SMS_PHONENO T Set T.NA…

几级工作台做石头高墙_创造与魔法:建筑新手入门攻略,家园建材怎么做

hello大家好&#xff0c;又见面啦&#xff0c;我是创造与魔法郁金香建筑团的建筑师&#xff0c;九梨梨众所周知&#xff0c;我是一个热衷于出各类建筑案例的人&#xff0c;玩创魔两年多&#xff0c;做了好几十个不同款式的家园吧。其实创魔这个游戏&#xff0c;建筑只是其中一个…

oracle vitu,Supply Chain Management (SCM) a Manufacturing | Oracle Česká Republika

Nebyly nalezeny ždn vsledkyVašemu vyhledvn neodpovdaj ždn vsledky.Abyste našli to, co hledte, doporučujeme vyzkoušet nsledujc postup:Zkontrolujte pravopis vašich klčovch slov ve vyhledvn.Použijte synonyma pro klčov slovo, kter jste zadali, napřk…

python程序文件是什么_.py文件是什么?

展开全部.py文件是python的脚本文件。Python在执行时&#xff0c;首先会将.py文件中的62616964757a686964616fe59b9ee7ad9431333431363039源代码编译成Python的byte code(字节码)&#xff0c;然后再由Python Virtual Machine(Python虚拟机)来执行这些编译好的byte code。这种机…

oracle12 快照保存时间,【AWR】调整AWR数据采样时间间隔及历史快照保留时间

1.AWR默认的采样间隔和历史快照保留时间默认是保留七天&#xff0c;采集间隔是1小时&#xff0c;这个信息可以从DBA_HIST_WR_CONTROL视图中获得。sysora10g> col SNAP_INTERVAL for a20sysora10g> col RETENTION for a20sysora10g> select * from dba_hist_wr_control…

两步路轨迹文件位置_最新Uber ATG的轨迹预测方法LiRaNet介绍

arXiv今年10月刚刚上传论文“LiRaNet: End-to-End Trajectory Prediction using Spatio-Temporal Radar Fusion“。其特色在于&#xff0c;除了激光雷达和HD Map之外&#xff0c;该轨迹预测方法采用了雷达传感器的信息。雷达和激光雷达融合是有挑战性的&#xff0c;因为前者的低…

python解方程时 怎样变换系数批量解方程_python求解方程

最有效的求解方法&#xff1a;三行代码搞定任何线性方程云栖号资讯&#xff1a;【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01;在三行函数中解决任何线性方程式的技巧&#xff0c;甚至可以在两行代码…

linux查看目录下 开头,Linux下ls如何看到.开头的文件

Linux下ls查看到.开头的文件方法&#xff1a;ls -aLinux操作系统是UNIX操作系统的一种克隆系统&#xff0c;它诞生于1991 年的10 月5 日(这是第一次正式向外公布的时间)。以后借助于Internet网络&#xff0c;并通过全世界各地计算机爱好者的共同努力&#xff0c;已成为今天世界…

python3.7代码转python2.7_Python3.7与Python2.7在centos7下兼容并存

原标题&#xff1a;Python3.7与Python2.7在centos7下兼容并存1、下载python3.7wget "https://www.python.org/ftp/python/3.7.0/Python-3.7.0.tgz"2、解压下载好的压缩包tar -zxvf Python-3.7.0.tgz3、配置编译python3.7mkdir /usr/local/python3 cd Python-3.7.0 ./…

linux红帽密码复杂度,[步骤] Linux 密码策略的设置(设置密码复杂度)(CentOS8RHEL8 版)...

步骤目录&#xff1a;步骤一&#xff1a;设置密码必须包含大小写字母等策略1.1 生成设置密码必须包含大小写字母的策略文件1.2 设置密码必须包含大小写字母等策略步骤二&#xff1a;设置密码有效期等策略步骤三&#xff1a;设置新密码不能和旧密码重复的策略具体的操作步骤&…

增值电信服务费是什么意思_增值电信业务IDC许可证要年检吗,流程是什么

据国家相关法律法规&#xff0c;持有IDC许可证的企业每年年初都需要办理IDC年检&#xff0c;企业也应当重视IDC年检&#xff0c;否则将会面临惩罚&#xff0c;所以小编来给大家介绍云南IDC许可证年检流程。为什么要办理云南IDC许可证年检,如何办理?根据《中华人民共和国电信条…

linux查看进程调用接口,查看某个程序都调用哪些api函数

查看某个程序都调用哪些api函数以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;查看某个程序都调用哪些api函数vs6里带了个工具叫depends可以看反汇编软件w32dasm也可以希望能帮到你windows编…

linux生产上线工具,Linux 产能工具及其使用技巧

由于生产力本身是一个主观术语&#xff0c;我不打算详细解释我这里要讲到的“生产力”是什么。我打算给你们展示一些工具及其使用技巧&#xff0c;希望这会帮助你在Linux中工作时能更专注、更高效&#xff0c;并且能节省时间。Linux产能工具及其使用技巧再次说明&#xff0c;我…