debounce、throttle、requestAnimationFrame
今天review同事代码,代码实现了返回顶部的功能,用到了lodash库中的throttle,我看着眼生,于是乎去看了下lodash文档,然后牵出了debounce,具体的知识点,这里不再赘述,底部的文章链接,是一篇很不错的文章。
下面是throttle 和 requestAnimationFrame实现的一个小功能,我只是摘抄出来,方便后面查阅。(文章底部链接的文章中也有的哈)
var latestKnownScrollY = 0,
ticking = false,
item = document.querySelectorAll('.item');
/// requestAnimationFrame
function update() {
// reset the tick so we can
// capture the next onScroll
ticking = false;
item[0].style.width = latestKnownScrollY + 100 + 'px';
}
function onScroll() {
latestKnownScrollY = window.scrollY; //No IE8
if(!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
window.addEventListener('scroll', onScroll, false);
/// THROTTLE
function throttled_version() {
item[1].style.width = window.scrollY + 100 + 'px';
}
window.addEventListener('scroll', _.throttle(throttled_version, 16), false);
https://css-tricks.com/debouncing-throttling-explained-examples/
debounce、throttle、requestAnimationFrame的更多相关文章
- 性能提速:debounce(防抖)、throttle(节流/限频)
debounce与throttle是用户交互处理中常用到的性能提速方案,debounce用来实现防抖动,throttle用来实现节流(限频).那么这两个方法到底是什么(what)?为何要用(why-解 ...
- JS动画三剑客——setTimeout、setInterval、requestAnimationFrame
一.前言 前端实现动画效果主要有以下几种方法:CSS3中的transition 和 animation ,Javascript 中可以通过定时器 setTimeout.setinterval,HTML ...
- HTML Standard系列:Event loop、requestIdleCallback 和 requestAnimationFrame
HTML Standard系列:Event loop.requestIdleCallback 和 requestAnimationFrame - 掘金 https://juejin.im/post/5 ...
- 白话debounce和throttle
遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...
- 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Debounce 和 Throttle 的原理及实现---防止频繁触发某事件
原文:http://blog.csdn.net/redtopic/article/details/69396722 在处理诸如 resize.scroll.mousemove 和 keydown/ke ...
- debounce 与 throttle 区别
原文地址:http://undefinedblog.com/debounce-and-throttle/ 二.什么是debounce 1. 定义 如果用手指一直按住一个弹簧,它将不会弹起直到你松 ...
- Debounce 和 Throttle【转载】
在处理诸如 resize.scroll.mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有 ...
- angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流
大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子
随机推荐
- March 30 2017 Week 13 Thursday
I learned the value of hard work by working hard. 只有真的努力了,才会知道努力的价值. On the day, March 12th 2017, I ...
- PCI PCI-X PCI-E介绍
1.PCI 外设互联标准(或称个人电脑接口,Personal Computer Interface),实际应用中简称PCI(Peripheral Component Interconnect),是一种 ...
- MySQL:数据库入门篇2
#移除主键时需要先解除递增,才能解除主键 alter table info modify id int null , drop PRIMARY key 一.用户权限 1.创建用户 create use ...
- HBuilder实现WiFi调试Android
要求手机是开发模式 wifi实现 条件:已ROOT手机.手机和电脑需要在一个网段 第一步:安装在应用商店下载WiFi ADB (注意这里显示的ip等下使用) 第二步:打开WIFI ADB 第三步:切换 ...
- 【洛谷P1774】最接近神的人
最接近神的人_NOI导刊2010提高(02) 用类似于桶的方法,树状数组记录原序列的某位置之前已经插入了多少个数, 插入时树状数组单点加1即可 先排一遍序,从大到小插入所有数在原序列的位置, 统计每次 ...
- Notepad++正则表达式使用
推荐个正则表达式在线测试的工具http://ccmpp.com/Regex/ Notepad++正则表达式使用 -- ::| 分类: 文档 | 标签:正则表达式 替换 notepad++ 匹配 查找 ...
- (转)超级实用且不花哨的js代码大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
- Android学习笔记_32_通过WebView实现JS代码与Java代码互相通信
webview两种实现方法,覆盖onKeyDown()方法 缓存 WebSettings应用注意的几个问题 1.要实现JS代码与Java代码互相通信,需要通过Android的WebView控件,在视图 ...
- c语言描述的链队列的基本操作
#include<stdio.h> #include<stdlib.h> #define ok 0 #define error 1 //链队列特点在于不仅有链的头指针和尾指针, ...
- WKWebView简单使用及关于缓存的问题
Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7.支持到IOS8 ...