前言

据说阿里有一道面试题就是谈谈函数节流函数防抖
糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习。here we go!

概念和例子

函数防抖(debounce)

在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

看一个(栗子):

//模拟一段ajax请求
function ajax(content) {
console.log('ajax request ' + content)
} let inputa = document.getElementById('unDebounce') inputa.addEventListener('keyup', function (e) {
ajax(e.target.value)
})

看一下运行结果:

可以看到,我们只要按下键盘,就会触发这次ajax请求。不仅从资源上来说是很浪费的行为,而且实际应用中,用户也是输出完整的字符后,才会请求。下面我们优化一下:

//模拟一段ajax请求
function ajax(content) {
console.log('ajax request ' + content)
} function debounce(fun, delay) {
return function (args) {
let that = this
let _args = args
clearTimeout(fun.id)
fun.id = setTimeout(function () {
fun.call(that, _args)
}, delay)
}
} let inputb = document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputb.addEventListener('keyup', function (e) {
debounceAjax(e.target.value)
})

看一下运行结果:

可以看到,我们加入了防抖以后,当你在频繁的输入时,并不会发送请求,只有当你在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内又输入,会重新触发计时。
再看一个:


let biu = function () {
console.log('biu biu biu',new Date().Format('HH:mm:ss'))
} let boom = function () {
console.log('boom boom boom',new Date().Format('HH:mm:ss'))
} setInterval(debounce(biu,500),1000)
setInterval(debounce(boom,2000),1000)

看一下运行结果:

这个就很好的解释了,如果在时间间隔内执行函数,会重新触发计时。biu会在第一次1.5s执行后,每隔1s执行一次,而boom一次也不会执行。因为它的时间间隔是2s,而执行时间是1s,所以每次都会重新触发计时

个人理解 函数防抖就是法师发技能的时候要读条,技能读条没完再按技能就会重新读条。

函数节流(throttle)

规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

看一个:


function throttle(fun, delay) {
let last, deferTimer
return function (args) {
let that = this
let _args = arguments
let now = +new Date()
if (last && now < last + delay) {
clearTimeout(deferTimer)
deferTimer = setTimeout(function () {
last = now
fun.apply(that, _args)
}, delay)
}else {
last = now
fun.apply(that,_args)
}
}
} let throttleAjax = throttle(ajax, 1000) let inputc = document.getElementById('throttle')
inputc.addEventListener('keyup', function(e) {
throttleAjax(e.target.value)
})

看一下运行结果:

可以看到,我们在不断输入时,ajax会按照我们设定的时间,每1s执行一次。

结合刚刚biubiubiu的:


let biubiu = function () {
console.log('biu biu biu', new Date().Format('HH:mm:ss'))
} setInterval(throttle(biubiu,1000),10)

不管我们设定的执行时间间隔多小,总是1s内只执行一次。

个人理解 函数节流就是fps游戏的射速,就算一直按着鼠标射击,也只会在规定射速内射出子弹。

总结

  • 函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
  • 函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。

结合应用场景

  • debounce

    • search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
    • window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
  • throttle

    • 鼠标不断点击触发,mousedown(单位时间内只触发一次)
    • 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断

拓展

参考链接:http://www.cnblogs.com/zichi/...

这是高程中的经典代码:


function throttle(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function () {
method.call(context);
}, 100)
}

我们通过上面的例子知道,其实这段函数应该是debounce函数防抖,而不是函数节流,很多文章也都会拿这段代码来做例子,函数本身没错,但是命名错了。

原作者的这段话就写的很好,

就以 throttle 为例,某日,老师给你布置了一个作业,让你深入理解一下 throttle,第二天上课来聊聊。张三心里非常高兴,这个概念在经典书籍《JavaScript高级程序设计》中见过,打开一看,就两页,而且解释地非常清晰,看完就高兴地干别的事情去了。而李四,觉得高程三讲的有点少,而去谷歌了下其他关于 throttle 的知识点,兴奋地看到 throttle 函数的好几种写法,发现高程三只是用了最简单的方式,还有更优雅运用场景更多的写法,或许此时他已经发现和 throttle 同时出现的还有个 debounce,这是什么鬼?反正老师没说,以后再看吧,于是心满意足地玩游戏去了。而王五,和李四一样发现了 debounce,这是什么?一起了解了吧,继而发现 debounce 的用法居然和高程三中的 throttle 一样!继续挖下去,发现高程三中的 throttle 函数其实应该叫 debounce,看到最后,王五已经把 throttle 和 debounce 彻底理解了。

我们要做王五,并且争取早日产出一手知识!加油!

广而告之

本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。

欢迎讨论,点个赞再走吧 。◕‿◕。 ~

7分钟理解JS的节流、防抖及使用场景的更多相关文章

  1. 一文理解JS的节流、防抖及使用场景

    函数防抖(debounce):在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 看一个

  2. 深入理解JS函数节流和去抖动

    一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...

  3. 10分钟理解JS引擎的执行机制

    首先,请牢记2点: (1) JS是单线程语言 (2) JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问 (1) JS为什么是单线 ...

  4. 一分钟理解js闭包

    什么是闭包?先看一段代码: ? 1 2 3 4 5 6 7 8 9 10 function a(){   var n = 0;   function inc() {     n++;     cons ...

  5. javascript深入理解js闭包(转)

    javascript深入理解js闭包 转载  2010-07-03   作者:    我要评论 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...

  6. JS函数节流和防抖

    看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...

  7. js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...

  8. js节流防抖应用场景,以及在vue中节流防抖的具体实现

    故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(de ...

  9. js 函数节流和防抖

    js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...

随机推荐

  1. 禁用所有控制台console.log()打印

    在前端dev的环境下,经常会用到console.log()进行调试,以方便开发, 而在产品release的版本中,又不合适在浏览器的console中输出那么多的调试信息. 但是会经常因为没有删除这些开 ...

  2. (第一章第四部分)TensorFlow框架之张量

    系列博客链接: (一)TensorFlow框架介绍:https://www.cnblogs.com/kongweisi/p/11038395.html (二)TensorFlow框架之图与Tensor ...

  3. SQL Server--插入一天数据返回ID值

    这里将该功能写成了一个存储过程, 本来只写Insert的话,返回1,即影响的行数,该数据没太大应用意义. 想在Insert的基础上,返回新添加的这条数据的ID,两种方法: 1 .添加第17行的Sele ...

  4. 矩池云上使用nohup和&让任务后台运行

    1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...

  5. linux echo用法和实例

    echo命令用于在shell中打印shell变量的值,或者直接输出指定的字符串.linux的echo命令,在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的,因此有必要了解下 ...

  6. 小程序 laravel 实现秒杀

    参考博客: https://blog.csdn.net/m0_56487875/article/details/118603439 小程序登录: https://www.cnblogs.com/xia ...

  7. tensorflow源码解析之framework-node

    目录 什么是node node_def 关系图 涉及的文件 迭代记录 1. 什么是node TF中的计算图由节点组成,每个节点包含了一个操作,表示这个节点的作用,比如,如果一个节点的作用是做矩阵乘法, ...

  8. jq集成月份插件(不要年月日,只要年月)

    最近项目中报表统计需要按照月份进行统计,以前用的jq-ui的插件,里面集成的是年月日,修改了好久,觉得太过麻烦,就换了个思路,由于赶时间,所以就度娘了,找到了一个很简洁又简单的Demo,但是发现和我的 ...

  9. 『德不孤』Pytest框架 — 14、Pytest中的conftest.py文件

    目录 1.conftest.py文件介绍 2.conftest.py的注意事项 3.conftest.py的使用 4.不同位置conftest.py文件的优先级 5.conftest.py中Fixtu ...

  10. ArcMap进行天空开阔度(SVF)分析

    这里的SVF并不是生物学或医学的(Stromal Vascular Fraction),而是指GIS中的(Sky View Factor,SVF),即为(城市)天空开阔度. 城市天空开阔度(Sky V ...