龙游做网站,重庆网站推广人员,有没有做软件的网站,wordpress自动跳转到手机版什么是函数节流和函数防抖#xff1f;下面本篇文章就来给大家浅谈一下函数节流和函数防抖。有一定的参考价值#xff0c;有需要的朋友可以参考一下#xff0c;希望对大家有所帮助。前言事件的触发权很多时候都属于用户#xff0c;有些情况下会产生问题#xff1a;向后台发…什么是函数节流和函数防抖下面本篇文章就来给大家浅谈一下函数节流和函数防抖。有一定的参考价值有需要的朋友可以参考一下希望对大家有所帮助。前言事件的触发权很多时候都属于用户有些情况下会产生问题向后台发送数据用户频繁触发对服务器造成压力一些浏览器事件:window.onresize、window.mousemove等触发的频率非常高会造成浏览器性能问题如果你碰到这些问题那就需要用到函数节流和防抖了。一、函数节流(throttle)函数节流一个函数执行一次后只有大于设定的执行周期后才会执行第二次。有个需要频繁触发函数出于优化性能角度在规定时间内只让函数触发的第一次生效后面不生效。1.如何实现其原理是用时间戳来判断是否已到回调该执行时间记录上次执行的时间戳然后每次触发 scroll 事件执行回调回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段如果是则执行并更新上次执行的时间戳如此循环 html,body {height: 500%; // 让其出现滚动条
}
function throttle(fn, delay) {// 记录上一次函数触发的时间var lastTime 0;return function() {// 记录当前函数触发的时间var nowTime Date.now();if (nowTime - lastTime delay) {// 修正this指向问题fn.call(this);// 同步时间lastTime nowTime;}}
}
document.onscroll throttle(function() {console.log(scroll事件被触发了 Date.now()) }
, 200)上例中用到了闭包的特性--可以使变量lastTime的值长期保存在内存中。2.函数节流的应用场景需要间隔一定时间触发回调来控制函数调用频率DOM 元素的拖拽功能实现mousemove搜索联想keyup计算鼠标移动的距离mousemoveCanvas 模拟画板功能mousemove射击游戏的 mousedown/keydown 事件单位时间只能发射一颗子弹监听滚动事件判断是否到页面底部自动加载更多给 scroll 加了 debounce 后只有用户停止滚动后才会判断是否到了页面底部如果是 throttle 的话只要页面滚动就会间隔一段时间判断一次二、函数防抖(debounce)防抖函数一个需要频繁触发的函数在规定时间内只让最后一次生效前面的不生效。1.如何实现其原理就第一次调用函数创建一个定时器在指定的时间间隔之后运行代码。当第二次调用该函数时它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了这个操作就没有任何意义。然而如果前一个定时器尚未执行其实就是将其替换为一个新的定时器然后延迟一定时间再执行。button idbtn按钮/button
script typetext/javascript
function debounce(fn, delay) {// 记录上一次的延时器var timer null;return function() {// 清除上一次延时器clearTimeout(timer)timer setTimeout(function() {fn.apply(this)}, delay)}
}
document.getElementById(btn).onclick debounce(function() {console.log(点击事件被触发 Date.now())
}, 1000)
/script上例中也用到了闭包的特性--可以使变量timer的值长期保存在内存中。2.函数防抖的应用场景对于连续的事件响应我们只需要执行一次回调每次 resize/scroll 触发统计事件文本输入的验证连续输入文字后发送 AJAX 请求进行验证验证一次就好三、总结函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发而一个方法之所以会被频繁触发大多数情况下是因为 DOM 事件的监听回调而这也是函数节流以及防抖多数情况下的应用场景。参考文章函数节流与函数防抖JavaScript 函数节流和函数去抖应用场景辨析函数节流、函数防抖实现原理分析本文转载自 https://segmentfault.com/a/1190000017229182
