您现在的位置是:网站首页> 内容页

节流和防抖的实现

  • 八达国际手机版入口
  • 2019-10-01
  • 488人已阅读
简介 1防抖+定义:合并事件且不会去触发事件,当一定时间内没有触发这个事件时,才真正去触发事件+原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清楚上一次的延时操
 1 防抖+ 定义:合并事件且不会去触发事件,当一定时间内没有触发这个事件时,才真正去触发事件+ 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清楚上一次的延时操作定时器,重新定时+ 场景:keydown事件上验证用户名,输入法的联想+ 实现:

 

 

function debounce(fn, delay) { var timer; return function() { var that = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(that, args); }, delay); }}

 

2 节流+ 定义:持续触发事件时,合并一定时间内的事件,在间隔一定事件之后再真正触发事件。每间隔一段事件触发一次+ 场景:resize改变布局时,onscroll滚动添加加载下面的图片时。+ 实现:1. 使用时间戳> + 原理:当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为0),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。> + 缺陷:第一次事件会立即执行,停止触发后没办法再激活事件。

function throttle(fn, interval) { var previousTime = +new Date() return function () { var that = this var args = arguments var now = +new Date() if (now - previousTime >= interval) { previousTime = now fn.apply(that, args) } }} 2. 使用定时器>+ 原理:当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。>+ 缺陷:第一次事件会在n秒后执行,停止触发后依然会再执行一次事件。

function throttle(fn, interval) { var previousTime = +new Date() return function () { var that = this var args = arguments var now = +new Date() if (now - previousTime >= interval) { previousTime = now fn.apply(that, args) } }}

 

3. 优化> + 鼠标移入能立刻执行,停止触发的时候还能再执行一次

function throttle(fn, interval) { var previousTime = +new Date() return function () { var that = this var args = arguments var now = +new Date() if (now - previousTime >= interval) { previousTime = now fn.apply(that, args) } }}

 

喜欢的同学,帮忙点个赞哦!

原文地址: 节流和防抖的实现

 

, 1, 0, 9);

文章评论

Top