事件的触发权很多时候都属于用户,有些情况下会产生问题:
如果你碰到这些问题,那就需要用到函数节流和防抖了。
函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。
有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效。
其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 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的值长期保存在内存中。
需要间隔一定时间触发回调来控制函数调用频率:
防抖函数:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。
其原理就第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。
<button id='btn'>按钮</button> <script type="text/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的值长期保存在内存中。
对于连续的事件响应我们只需要执行一次回调:
函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发,而一个方法之所以会被频繁触发,大多数情况下是因为 dom 事件的监听回调,而这也是函数节流以及防抖多数情况下的应用场景。
如对本文有疑问, 点击进行留言回复!!
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(一)
Cocos Creator 热更新工具BUG:重启游戏后热更新无效!(已解决)
网友评论