throttle(节流)和debounce(防抖)
防抖和节流都是用来控制频繁调用的问题,但是这两种的应用场景是有区别的。
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(防抖)的更多相关文章
- throttle(节流函数) 与 debounce(防抖动函数)理解与实现
我们会对一些触发频率较高的事件进行监听,(如:resize scroll keyup事件) 如果在回调里执行高性能消耗的操作(如反复操作dom, 发起ajax请求等),反复触发时会使得性能消耗提高,浏 ...
- 关于js节流函数throttle和防抖动debounce
废话不多说,直奔主题. 什么是throttle和debounce? 这两个方法的主要目的多是用于性能优化.最常见的应用尝尽就是在通过监听resize.scroll.mouseover等事件时候的性能消 ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异
Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...
- 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异
来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...
- 函数节流和函数防抖JavaScript实现
函数节流 function throttle(fn, delay = 1000) { let Running = false; return function () { if (Running) { ...
- js前端性能优化之函数节流和函数防抖
前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...
随机推荐
- 安卓混合开发——原生Java和H5交互,保证你一看就懂!
** 在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的Jav ...
- PAT——1056. 组合数的和
给定N个非0的个位数字,用其中任意2个数字都可以组合成1个2位的数字.要求所有可能组合出来的2位数字的和.例如给定2.5.8,则可以组合出:25.28.52.58.82.85,它们的和为330. 输入 ...
- Android自定义控件——有弹性的ListView,ScrollView
上一次我们试验了有弹性的ScrollView.详情 这一次,我们来试验有弹性的ScrollView. 国际惯例,效果图: 主要代码: [java] view plaincopy import andr ...
- 【腾讯敏捷转型No.2】帅哥,来多少敏捷?
上回腾讯敏捷转型系列第一篇文章<敏捷到底是什么鬼?>讲到公司铁了心要推进敏捷,这是战略层面的决定,为什么呢? 当时的我们并不知道公司为什么一定要推行敏捷的新概念,但是后来公司的变化帮助我们 ...
- #leetcode刷题之路23-合并K个排序链表
合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例:输入:[ 1->4->5, 1->3->4, 2->6]输出: 1->1->2- ...
- $.trim() 去除空格方法 (验证使用)
- Myeclipse报错:The word is not correctly spelled
在eclipse下的Window--Preference输入spell,然后把第一个复选框“Enable spell checking"给去掉就可以了.
- python 时间time模块介绍和应用
1.其中format_string 类型的时间和struct_time之间可以转换,timestamp时间戳可以和struct_time之间进行转化,但是时间戳和格式化时间是不能直接转换的. time ...
- 解决Linux上tomcat启动却无法访问
linux中tomcat的安装 安装tomcat前首先要安装对应的jdk并配置Java环境 下载tomcat安装包 下载路径:https://tomcat.apache.org/download-80 ...
- 4.28-python学习笔记(转义符&input函数)
参考书目:<Learn Python The Hard Way> ##练习10 print("i am 6'2\"tall.")#将双引号转义 print(' ...