c2c网站功能模块设计,全球做的最好的公司网站,腾讯云域名注册步骤,百度销售系统点击上方☝Java编程技术乐园#xff0c;轻松关注#xff01;及时获取有趣有料的技术文章文章很好#xff0c;耐心阅读#xff0c;记得点赞和关注哦~前言最近有个朋友在面试过程中遇到一个问题#xff1a;什么是防抖和节流#xff1f;糟了#xff0c;这可触碰到我的知识盲…点击上方☝Java编程技术乐园轻松关注及时获取有趣有料的技术文章文章很好耐心阅读记得点赞和关注哦~前言最近有个朋友在面试过程中遇到一个问题什么是防抖和节流糟了这可触碰到我的知识盲区了好像听也没听过这 2 个东西痛定思痛赶紧学习学习。防抖(debounce)在事件被触发 n 秒之后执行如果在此期间再次触发事件则重新开始计时。乍一看这不是闲的蛋疼吗为啥要等 n 秒之后再执行呢本着存在即合理的原则咱看不懂但咱得去学啊经过十秒钟的思考突然想起来之前做过的公司的一个小程序使用的 mpvuevant-weappvan-field 标签并没有和数据进行双向绑定而是每次都要触发 input 事件从而完成数据绑定这就导致了一个问题输一个手机号要触发 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);})这时候看输出是的只输出了一次号码也就是说不用每次输入都进行一次搜索了。节流(throttle)如果持续触发一个事件则在一定的时间内只执行一次事件。那么问题来了既然是持续触发了那为啥还要设定一定时间内只执行一次呢废话你吃鸡为啥不用 AKM 非要去追梦抢狗杂呢还不是因为 AKM 射速慢(狗杂真香)我们来试着做一个 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();})当我们疯狂点击按钮的时候可能这个例子不是很突出我再说个类似的英雄联盟和DNF的技能冷却应该更适合~是时候回归一下标题了免得有人说我可以去 UC 震惊部了公司的大数据组件目前是只要页面大小发生变化就会重新加载这就导致了有时候拉一下控制台会发生很多次请求这个时候就可以用防抖来解决一下了~作者.Ping链接https://juejin.im/post/5e0d7ab9f265da5d691035b5来源掘金
