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中断选择数据流的用法. 例子
随机推荐
- 实现两个N×N矩阵的乘法,矩阵由一维数组表示
此题的关键在于找到矩阵乘法的不变式! 例如: 矩阵a × 矩阵b = 矩阵ab 1 2 5 6 × 3 4 7 8 显然 ab[0] = a[0] * b[0] + a[1] * b[2] ab[1] ...
- centos下安装lnmp各个版本的几种方法
首先我们用一种yum的方法安装,我们需要rpm源 默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | g ...
- poj2253 Frogger dijkstra
题目大意: 给出n个岛的坐标,前两个坐标分别为A青蛙和B青蛙所在岛的坐标,A青蛙想到达B青蛙所在的岛,A可以从某一个岛跳到任意其它一个岛上,则A到B的每条路径都有一个跳的最远的距离Xi,求这些最远距离 ...
- 插上翅膀,让Excel飞起来——xlwings(三)
xlwings基本对象 xlwings基本对象 App相当于Excel程序,Book相当于工作簿.N个Excel程序则由apps表示,N个工作簿由books表示. 对工作簿的操作 #导入xlwings ...
- 【转载】#445 - Differences Between an Interface and an Abstract Class
An interface provides a list of members, without an implementation, that a class can choose to imple ...
- 【转】Android 之ActivityThead、ActivityManagerService 与activity的管理和创建
在android中,Activity是四大组件中比较重要的一个(当然其他的也比较重要),那么android中是怎样管理这些activity的?应用的进程和主线程是怎么创建的,应用的消息循环又是在什么时 ...
- python-实现登录接口
简介:1.在本地创建两个文件,一个文件的内容是存储用户名和密码,另一个的内容是存储锁定的用户 2.登录次数限制为三次,当密码错误三次后,该账号锁定,无法再次登录 #coding=ut ...
- 【题解】洛谷P1066 [NOIP2006TG] 2^k进制数(复杂高精+组合推导)
洛谷P1066:https://www.luogu.org/problemnew/show/P1066 思路 挺难的一道题 也很复杂 满足题目要求的种数是两类组合数之和 r的最多位数m为 w/k(当w ...
- hbase 数据拷贝
由于运营数据太大,另外避免影响正常访问,所以需要临时拷贝部分数据到临时表中. bin/hbase org.apache.hadoop.hbase.mapreduce.CopyTable [--star ...
- data-ng-click 指令
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...