防抖和节流都是用来控制频繁调用的问题,但是这两种的应用场景是有区别的。

throttle(节流)

有一个调用周期,在一个很长的时间里分为多段,每一段执行一次。例如onscroll,resize,500ms执行一次

// 使用时间差
function throttle (fun, wait) {
let previous = 0 return function (...args) {
let now = Date.now()
let context = this
if (now - previous > wait) {
fun.apply(context, args)
previous = now
}
}
} // 使用定时器
function throttle1 (func, wait) {
let timeout
return function (...args) {
let context = this
if (!timeout) {
timeout = setTimeout(function () {
timeout = null
func.apply(context, args)
}, wait)
}
}
}

debounce(防抖)

在一定时间内不调用,只调用一次。例如input事件,停止输入500ms之后再执行。

function debounce (fun, delay) {
let time = null
return function (...args) {
let ctx = this
clearTimeout(time)
time = setTimeout(function () {
fun.apply(ctx, args)
time = null
}, delay)
}
}

throttle(节流)和debounce(防抖)的更多相关文章

  1. throttle(节流函数) 与 debounce(防抖动函数)理解与实现

    我们会对一些触发频率较高的事件进行监听,(如:resize scroll keyup事件) 如果在回调里执行高性能消耗的操作(如反复操作dom, 发起ajax请求等),反复触发时会使得性能消耗提高,浏 ...

  2. 关于js节流函数throttle和防抖动debounce

    废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...

  3. 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖

    前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

  4. JavaScript函数节流和函数防抖之间的区别

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  5. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  6. 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异

    Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...

  7. 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异

    来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...

  8. 函数节流和函数防抖JavaScript实现

    函数节流 function throttle(fn, delay = 1000) { let Running = false; return function () { if (Running) { ...

  9. js前端性能优化之函数节流和函数防抖

    前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...

随机推荐

  1. CSS动画总结效果

       CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及a ...

  2. Selenium & Webdriver 远程测试和多线程并发测试

    Selenium & Webdriver 远程测试和多线程并发测试 Selenium Webdriver自动化测试,初学者可以使用selenium ide录制脚本,然后生成java程序导入ec ...

  3. Ajax缓存

    一.Ajax缓存的好处 这种设计使客户端对一些静态页面内容的请求,比如图片,css文件,js脚本等,变得更加快捷,提高了页面的响应速度,也节省了网络通信资源. 二.Ajax缓存的不足 Ajax缓存虽然 ...

  4. java环境变量配置(win7)

    JDK1.8 1.单击“计算机-属性-高级系统设置”,单击“环境变量”.在“系统变量”栏下单击“新建”,创建新的系统环境变量. 2.  (1)新建->变量名"JAVA_HOME&quo ...

  5. 免费申请 WebStorm 使用许可 - free JetBrains Open Source license(s)

    闲聊 步入前端切图仔行列的我曾多次纠结过「到底使用哪种编辑器写前端好用?」这样的问题,前前后后尝试过 Dreamweaver .HBuilder .Sublime Text .Atom 和现在主要使用 ...

  6. summernote富文本编辑器的使用

    最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...

  7. LR--用栈实现移进--归约分析(demo)

    1.考虑文法 \(E->E+E\) \(E->E*E\) \(E->id\) 2.最右推导 不难看出,这个文法是而二义的,所以有多个最右推导 3.移进归约 用一个栈存文法符号,用输入 ...

  8. 一个简单的Linux启动jar包的shell脚本

    背景: 项目设备端需要运行jar包程序与服务端进行socket连接并发送数据,每次启动进程时,都需要在Linux终端输入启动jar包的命令,比较繁琐,随之尝试将启动jar包的命令写入shell脚本文件 ...

  9. 必须掌握的前端模板引擎之art-template

    常用的模板引擎有tpl.js.baiduTemplate.doT.js.art-template等等: 我所理解的模板引擎就是把js数据传到html中展示出来: art-template 是一个简约. ...

  10. tomcat 远程debug配置,教你远程调试代码,解决线上故障

      IDEA远程DEBUG Tomcat很简单,配置如下: 1.修改tomcat服务器配置 打开tomcat/bin/catalina.sh 在空白处添加如下参数 CATALINA_OPTS=&quo ...