javascript防抖函数debounce详解_javascript技巧

来源:脚本之家  责任编辑:小易  

这个不难,先跟你说一下78行,那是调用回调函数method,并用apply把method中的this指向window,同时把debonce的参数作为method的参数传进去,但因为method里面没this,本身也没参数,所以跟直接调用效果差不多,但传了参数就有用。而代码本身是当屏幕滚动时触发debounce中return的那个函数(不是debonuce,无论屏幕滚不滚debounce都会执行),self和args可以无视,后面是判断延时timer存不存在,存在就删除,删完创建一个新的,延时0.2s。执行的效果就会是当屏幕滚一下时会console出滚动条高度,但是在0.2s中连续滚动时同样只会触发一次,因为会不断调用return的函数,把前一个延时删除www.zgxue.com防采集请勿采集本网。

定义及解读

防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 秒,直至新的 3 秒内没有函数调用请求,此时执行函数,不然就以此类推重新计时。

您是怎样调用?我分别是过这两个方法都得哦。您试试。方法1:这个是通过一进入网页调用的。charset=gb2312\"> 新建网页 1 javascript\"> function ChangeQty(pn) { window.

举一个小例子:假定在做公交车时,司机需等待最后一个人进入后再关门,每次新进一个人,司机就会把计时器清零并重新开始计时,重新等待 1 分钟再关门,如果后续 1 分钟内都没有乘客上车,司机会认为乘客都上来了,将关门发车。

函数(方法Function)是对js操作过程的封装。以后操作同样的过程。只要调用相应的函数(方法)即可。对象同样是对js代码封装。不过对象可以封装函数(方法)。比如把某一类的函数(方法)都封装

此时「上车的乘客」就是我们频繁操作事件而不断涌入的回调任务;「1 分钟」就是计时器,它是司机决定「关门」的依据,如果有新的「乘客」上车,将清零并重新计时;「关门」就是最后需要执行的函数。

经常谈论起函数和方法,也常常搞不清楚它们之间的界限,经常把两个混用。首先来看看,两者是如何定义的?函数(function)是可以执行的javascript代码块,由javascript程序定义或javascript实现

如果你还无法理解,看下面这张图就清晰多了,另外点击 这个页面 查看节流和防抖的可视化比较。其中 Regular 是不做任何处理的情况,throttle 是函数节流之后的结果(上一小节已介绍),debounce 是函数防抖之后的结果。

在js中对象就是神一般的存在,什么都是对象,你就这么理解好了。函数是用来实现具体功能的代码,用一种方式把他们组织起来,就是函数了。对象是有属性和方法的一个东西,在对象中的函数就变成了

原理及实现

实现原理就是利用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行。

return后面未加任何变量,它会返回一个空对象,直接显示的话就是“undefined”。一般这种用法主要是用来中途退出函数,而且不带任何返回值。

实现 1

// 实现 1// fn 是需要防抖处理的函数// wait 是时间间隔function debounce(fn, wait = 50) {// 通过闭包缓存一个定时器 idlet timer = null// 将 debounce 处理结果当作函数返回// 触发事件回调时执行这个返回函数return function(...args) {// 如果已经设定过定时器就清空上一次的定时器if (timer) clearTimeout(timer)// 开始设定一个新的定时器,定时器结束后执行传入的函数 fntimer = setTimeout(() => {fn.apply(this, args)}, wait)}}// DEMO// 执行 debounce 函数返回新函数const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000)// 停止滑动 1 秒后执行函数 () => console.log('fn 防抖执行了')document.addEventListener('scroll', betterFn)

实现 2

上述实现方案已经可以解决大部分使用场景了,不过想要实现第一次触发回调事件就执行 fn 有点力不从心了,这时候我们来改写下 debounce 函数,加上第一次触发立即执行的功能。

// 实现 2// immediate 表示第一次是否立即执行function debounce(fn, wait = 50, immediate) {let timer = nullreturn function(...args) {if (timer) clearTimeout(timer)// ------ 新增部分 start ------ // immediate 为 true 表示第一次触发后执行// timer 为空表示首次触发if (immediate && !timer) {fn.apply(this, args)}// ------ 新增部分 end ------ timer = setTimeout(() => {fn.apply(this, args)}, wait)}}// DEMO

// 执行 debounce 函数返回新函数

const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000, true)

// 第一次触发 scroll 执行一次 fn,后续只有在停止滑动 1 秒后才执行函数 fn

document.addEventListener('scroll', betterFn)

实现原理比较简单,判断传入的 immediate 是否为 true,另外需要额外判断是否是第一次执行防抖函数,判断依旧就是 timer 是否为空,所以只要 immediate && !timer 返回 true 就执行 fn 函数,即 fn.apply(this, args)。

加强版 throttle

现在考虑一种情况,如果用户的操作非常频繁,不等设置的延迟时间结束就进行下次操作,会频繁的清除计时器并重新生成,所以函数 fn 一直都没办法执行,导致用户操作迟迟得不到响应。

有一种思想是将「节流」和「防抖」合二为一,变成加强版的节流函数,关键点在于「 wait 时间内,可以重新生成定时器,但只要 wait 的时间到了,必须给用户一个响应」。这种合体思路恰好可以解决上面提出的问题。

给出合二为一的代码之前先来回顾下 throttle 函数,上一小节中有详细的介绍。

// fn 是需要执行的函数// wait 是时间间隔const throttle = (fn, wait = 50) => {// 上一次执行 fn 的时间let previous = 0// 将 throttle 处理结果当作函数返回return function(...args) {// 获取当前时间,转换成时间戳,单位毫秒let now = +new Date()// 将当前时间和上一次执行函数的时间进行对比// 大于等待时间就把 previous 设置为当前时间并执行函数 fnif (now - previous > wait) {previous = nowfn.apply(this, args)}}}

结合 throttle 和 debounce 代码,加强版节流函数 throttle 如下,新增逻辑在于当前触发时间和上次触发的时间差小于时间间隔时,设立一个新的定时器,相当于把 debounce 代码放在了小于时间间隔部分。

// fn 是需要节流处理的函数// wait 是时间间隔function throttle(fn, wait) {// previous 是上一次执行 fn 的时间// timer 是定时器let previous = 0, timer = null// 将 throttle 处理结果当作函数返回return function (...args) {// 获取当前时间,转换成时间戳,单位毫秒let now = +new Date()// ------ 新增部分 start ------ // 判断上次触发的时间和本次触发的时间差是否小于时间间隔if (now - previous < wait) {// 如果小于,则为本次触发操作设立一个新的定时器// 定时器时间结束后执行函数 fn if (timer) clearTimeout(timer)timer = setTimeout(() => {previous = nowfn.apply(this, args)}, wait)// ------ 新增部分 end ------ } else {// 第一次执行// 或者时间间隔超出了设定的时间间隔,执行函数 fnprevious = nowfn.apply(this, args)}}}// DEMO// 执行 throttle 函数返回新函数const betterFn = throttle(() => console.log('fn 节流执行了'), 1000)// 第一次触发 scroll 执行一次 fn,每隔 1 秒后执行一次函数 fn,停止滑动 1 秒后再执行函数 fndocument.addEventListener('scroll', betterFn)

看完整段代码会发现这个思想和上篇文章介绍的 underscore 中 throttle 的实现思想非常相似。

underscore 源码解析

看完了上文的基本版代码,感觉还是比较轻松的,现在来学习下 underscore 是如何实现 debounce 函数的,学习一下优秀的思想,直接上代码和注释,本源码解析依赖于 underscore 1.9.1 版本实现。

// 此处的三个参数上文都有解释_.debounce = function(func, wait, immediate) {// timeout 表示定时器// result 表示 func 执行返回值var timeout, result;// 定时器计时结束后// 1、清空计时器,使之不影响下次连续事件的触发// 2、触发执行 funcvar later = function(context, args) {timeout = null;// if (args) 判断是为了过滤立即触发的// 关联在于 _.delay 和 restArgumentsif (args) result = func.apply(context, args);};// 将 debounce 处理结果当作函数返回var debounced = restArguments(function(args) {if (timeout) clearTimeout(timeout);if (immediate) {// 第一次触发后会设置 timeout,// 根据 timeout 是否为空可以判断是否是首次触发var callNow = !timeout;timeout = setTimeout(later, wait);if (callNow) result = func.apply(this, args);} else {// 设置定时器timeout = _.delay(later, wait, this, args);}return result;});// 新增 手动取消debounced.cancel = function() {clearTimeout(timeout);timeout = null;};return debounced;};// 根据给定的毫秒 wait 延迟执行函数 func_.delay = restArguments(function(func, wait, args) {return setTimeout(function() {return func.apply(null, args);}, wait);});

相比上文的基本版实现,underscore 多了以下几点功能。

1、函数 func 的执行结束后返回结果值 result

2、定时器计时结束后清除 timeout,使之不影响下次连续事件的触发

3、新增了手动取消功能 cancel

4、immediate 为 true 后只会在第一次触发时执行,频繁触发回调结束后不会再执行

小结 函数节流和防抖都是「闭包」、「高阶函数」的应用 函数节流 throttle 指的是某个函数在一定时间间隔内(例如 3 秒)执行一次,在这 3 秒内 无视后来产生的函数调用请求 节流可以理解为养金鱼时拧紧水龙头放水,3 秒一滴 「管道中的水」就是我们频繁操作事件而不断涌入的回调任务,它需要接受「水龙头」安排 「水龙头」就是节流阀,控制水的流速,过滤无效的回调任务 「滴水」就是每隔一段时间执行一次函数 「3 秒」就是间隔时间,它是「水龙头」决定「滴水」的依据 应用:监听滚动事件添加节流函数后,每隔固定的一段时间执行一次 实现方案 1:用时间戳来判断是否已到执行时间,记录上次执行的时间戳,然后每次触发后执行回调,判断当前时间距离上次执行时间的间隔是否已经达到时间差(Xms) ,如果是则执行,并更新上次执行的时间戳,如此循环 实现方案 2:使用定时器,比如当 scroll 事件刚触发时,打印一个 hello world,然后设置个 1000ms 的定时器,此后每次触发 scroll 事件触发回调,如果已经存在定时器,则回调不执行方法,直到定时器触发,handler 被清除,然后重新设置定时器 函数防抖 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次 防抖可以理解为司机等待最后一个人进入后再关门,每次新进一个人,司机就会把计时器清零并重新开始计时 「上车的乘客」就是我们频繁操作事件而不断涌入的回调任务 「1 分钟」就是计时器,它是司机决定「关门」的依据,如果有新的「乘客」上车,将清零并重新计时 「关门」就是最后需要执行的函数 应用:input 输入回调事件添加防抖函数后,只会在停止输入后触发一次 实现方案:使用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行

一、概念解释函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的。反而形成一种视觉效果,就是一张图。就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样。同理,可以类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。二、函数节流函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。因为滚动事件,是一个高频触发的事件。以下是监听页面元素滚动的示例代码:函数节流var canRun=true;document.getElementById("throttle").onscroll=function(){if!canRun){判断是否已空闲,如果在执行中,则直接returnreturn;}canRun=false;setTimeout(function(){console.log("函数节流");canRun=true;},300);};函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。如果空闲,则可以正常触发方法执行。如果代码正在执行,则取消这次方法执行,直接return。这个方法的作用是监听ID为throttle元素的滚动事件。当canRun为true,则代表现在的滚动处理事件是空闲的,可以使用。通过关卡if!canRun),等于就拿到了通行证。然后下一步的操作就是立马将关卡关上canRun=false。这样,其他请求执行滚动事件的方法,就被挡回去了。接着用setTimeout规定最小的时间间隔300,接着再执行setTimeout方法体里面的内容。最后,等setTimeout里面的方法都执行完毕,才释放关卡canRun=true,允许下一个访问者进来。这个函数节流的实现形式,需要注意的是执行的间隔时间是>=300ms。如果具体执行的方法是包含callback的,也可以将canRun=true这一步放到callback中。理解了函数节流的关卡设置重点,其实改起来就简单多了。三、函数防抖函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。以下还是以页面元素滚动监听的例子,来进行解析:函数防抖var timer=false;document.getElementById("debounce").onscroll=function(){clearTimeout(timer);清除未执行的代码,重置回初始化状态timer=setTimeout(function(){console.log("函数防抖");},300);};函数节流的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。如果计时完毕,没有方法进来访问触发,则执行代码。这个方法的作用是监听ID为debounce元素的滚动事件进入滚动事件方法体的时候,做的第一件事就是清除上次未执行的setTimeout。而setTimeout的引用id由变量timer记录。clearTimeout方法,允许传入无效的值。所以这里直接执行clearTimeout即可。然后,将需要执行的代码放入setTimeout中,再返回setTimeout引用给timer缓存。如果倒计时300ms以后,还没有新的方法触发滚动事件,则执行setTimeout中的代码。函数防抖的实现重点,就是巧用setTimeout做缓存池,而且可以轻易地清除待执行的代码。其实,用队列的方式也可以做到这种效果。这里就不深入了。四、在线demo这是我写的一个测试demo,把鼠标移动到模块上方,滚动滚轮,即可在控制台查看输出效果内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解javascript节流函数中的throttle
  • javascript 节流函数 throttle 详解
  • js函数柯里化的方法和作用实例分析
  • js async 函数的含义和用法实例总结
  • js co 函数库的含义和用法实例总结
  • js thunk 函数的含义和用法实例总结
  • js generator 函数的含义与用法实例总结
  • js函数参数的传递与同名参数实例分析
  • js函数本身的作用域实例分析
  • js防抖函数和节流函数使用场景和实现区别示例分析
  • 使用javascript构建json格式字符串实现步骤
  • js正则表达式验证中文字符
  • 异步javascript的原理和实现技巧介绍
  • js实现无限级网页折叠菜单(类似树形菜单)效果代码
  • 开源免费天气预报接口api及全国所有地区代码(国家气象局提供)
  • javascript之partial application学习
  • js 获取鼠标左右键的键值方法
  • js判断图片是否加载完成方法汇总(最新版)
  • javascript canvas仿代码流瀑布
  • javascript中的变量作用域介绍
  • javascript函数节流和函数防抖之间的区别
  • JavaScript 求大神解释下这段防抖函数代码,最好详细越好
  • JavaScript函数节流和函数防抖之间的区别
  • JavaScript中防抖的延时函数
  • javascript open函数
  • javascript中函数 和函数对象的区别?
  • javascript中函数和方法的区别
  • JavaScript中函数对象与函数有什么区别?
  • javascript 函数,return
  • javascript fib( )函数到底是什么意思,怎么得出这个答案的?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧详解javascript节流函数中的throttlejavascript 节流函数 throttle 详解js函数柯里化的方法和作用实例分析js async 函数的含义和用法实例总结js co 函数库的含义和用法实例总结js thunk 函数的含义和用法实例总结js generator 函数的含义与用法实例总结js函数参数的传递与同名参数实例分析js函数本身的作用域实例分析js防抖函数和节流函数使用场景和实现区别示例分析使用javascript构建json格式字符串实现步骤js正则表达式验证中文字符异步javascript的原理和实现技巧介绍js实现无限级网页折叠菜单(类似树形菜单)效果代码开源免费天气预报接口api及全国所有地区代码(国家气象局提供)javascript之partial application学习js 获取鼠标左右键的键值方法js判断图片是否加载完成方法汇总(最新版)javascript canvas仿代码流瀑布javascript中的变量作用域介绍js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js删除数组里的某个元素方法javascript深入理解js闭包一个支持ff的modaldialog的js代码javascript数组常见操作方法实例总结【连红米手机抢购的js代码react-native-fs实现文件下载、文本存储的最短的ie判断代码react-native 封装选择弹出框示例(试用io详解微信小程序缓存--缓存时效性javascript实现显示和隐藏div方法汇总浅析js异步加载进度条javascript中使用substring删除字符串最后
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved