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,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...
随机推荐
- Office365学习笔记—Lookup类型加载条目过多解决方案
1,随着接触的项目越来越多,遇到的各种奇葩的问题也越来越多,不得不说,SharePoint是个好东西,提高了开发效率,简化了很多基础的功能.但是令人头疼的问题是,当你想做个稍微复杂点的功能,就不得不研 ...
- NSDate|NSTimeZone|时区|日历
NSDate,NSDateFormatter以及时区转换-开发者-51CTO博客 iOS 时区转换 东八区 - 简书 iOS时间的时区转换以及一些方法记录 - 简书 iOS - OC NSTimeZo ...
- VB
on error resume next: 从该语句开始,遇到错误时程序不会中止,也不会出现错误提示,将继续运行.作用范围直至程序结束或语句所在函数等结束 Public Property :可读也可写 ...
- 关于2018年第九届蓝桥杯[C++省赛B组][第四题:测试次数]的疑问
题目来源:https://blog.csdn.net/qq_34202873/article/details/79784548 #标题:测试次数#x星球的居民脾气不太好,但好在他们生气的时候唯一的异常 ...
- MySQL案例04:Cause: java.sql.SQLException: Could not retrieve transaction read-only status from server
今天同事发现程序日志有异常抛出,询问原因,进过排查发现与java的连接参数有关系,具体处理过程如下: 一.错误信息 "message": "\n### Error upd ...
- 服务端接收不到ajax post请求的参数
问题描述 服务端使用request.getParameter()接收不到post请求的参数,导致业务逻辑抛出空指针异常. 解决途径 tomcat对post请求支持的字节数不受限制的配置发生变化.在to ...
- 关于sparkStreaming(spark on yarn)的一个坑!
前些天我维护的一个streaming实时报表挂了,情况:数据无法实时更新增长,然后查看了报表所依赖的五张sqlserver的表,发现,只有1张的数据是正常写入的,还一张数据非正常写入,还有3张完全没有 ...
- 03.搭建Spark集群(CentOS7+Spark2.1.1+Hadoop2.8.0)
接上一篇:https://www.cnblogs.com/yjm0330/p/10077076.html 一.下载安装scala 1.官网下载 2.spar01和02都建立/opt/scala目录,解 ...
- python3网络爬虫系统学习:第一讲 基本库urllib
在python3中爬虫常用基本库为urllib以及requests 本文主要描述urllib的相关内容 urllib包含四个模块:requests——模拟发送请求 error——异常处理模块 pars ...
- Selenium_python自动化第一个测试案例(代码基本规范)
发生背景: 最近开始整理Selenium+python自动化测试项目中相关问题,偶然间翻起自己当时学习自动化时候写的脚本,发现我已经快认不出来写的什么鬼流水账了,所以今天特别整理下自动化开发Selen ...