标签:gil var 搜索框 nts func 手机 date style 不执行
1.防抖(debounce)
--函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
--防抖应用场景--------连续的事件,只需触发一次回调的场景 将多次函数的执行变成一次函数的执行
1.搜索框搜索输入。只需用户最后一次输入完,再发送请求
2.手机号、邮箱验证输入检测
3.窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染
// 函数防抖 const debounce = (func,time) => { let timer; return () => { clearTimeout(timer); timer = setTimeout(func, time); }; }; // 第一不执行延迟 后面会照常执行 function debounce(func,time,triggleNow) { var timer = null var debounced = function(){ var _self = this, args = arguments } if(timer) { clearTimeout(timer) } if(trigilleNow) { var exec = !timer timer = setTimeout(function () { timer =null },time) if(exec) { fn.apply(_self,args) } }else { timer = setTimeout(function(){ fn.apply(_self,args); },timer) } debounced.remove = function () { clearTimeout(timer) timer = null } }
2.节流(throttle)
--函数节流,就是限制一个函数在一定时间内只能执行一次。 例如单位时间内触发了30次事件 也只会执行第一次 后面不执行
--节流的应用场景
1.滚动加载,加载更多或滚到底部监听
2.搜索框,搜索联想功能
3.高频点击提交,表单重复提交
// 节流 function throttle (fn,interval) { // 最后一次执行时间 let last = 0 return function () { // 事件 let context = this // 对象 let args = arguments // 设置当前时间 let now = +new Date() // 时间差超出了设定计时 if((now - last) > interval) { // 重新设置最后一次执行时间 last = now // 切换this指向 fn.apply(context,args) } } }
标签:gil var 搜索框 nts func 手机 date style 不执行
原文地址:https://www.cnblogs.com/shirunfeng/p/14747570.html