珠海手机网站建设公司,网站安装php,网站建设与网页设计案例教程pdf下载,北京seo顾问服务#xff08;一#xff09;防抖
#xff08;1#xff09;定义#xff1a;单位事件内#xff0c;频繁触发#xff0c;只执行最后一次#xff08;像王者荣耀的回城操作#xff09;
#xff08;2#xff09;使用场景#xff1a;搜索输入框、手机号邮箱输入检测
一防抖
1定义单位事件内频繁触发只执行最后一次像王者荣耀的回城操作
2使用场景搜索输入框、手机号邮箱输入检测
3如何使用防抖 3.1lodash处理防抖 引入lodash.min.js用其提供的函数为_.debounce(fun,时间) 第一个参数为要处理的函数第二个为过了多少秒执行函数 3.2手写防抖函数 核心思路利用定时器setTimeout实现
声明一个定时器变量当鼠标每次滑动先判断是否有定时器了如果有则先清除以前的定时器如果没有定时器则开启定时器记得存在变量里面在定时器里面调用要执行的函数function debounce(fn,t){ let time // 如果直接写函数则页面一打开就会执行函数且执行一次所以要返回一个函数 return function(){ if(time) clearTimeout(time) timesetTimeout(function(){ fn() },t) } } 二节流
1节流定义单位时间内频繁触发只执行一次例如技能冷却等几秒后才能执行下一次的代码
2应用场景鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等
3如何实现节流
3.1lodash处理节流 _.throttle(fn,时间)第一个参数为要执行的函数第二个参数为最多多少秒执行一次函数
3.2手写节流函数 核心思路利用定时器setTimeout实现
声明一个定时器变量 当鼠标每次滑动先判断是否有定时器了如果有则不开启定时器如果没有定时器则开启定时器记得存在变量里面在定时器里面调用要执行的函数定时器里面要用timenull把定时器清空// 手写节流函数 function throttle(fn,t){ let timenull return function(){ if(!time){ timesetTimeout(function(){ fn() // 在setTimeout中无法删除定时器因为定时器还在运作应使用timenull,而不是clearTimeout timenull },t) } } }
