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中断选择数据流的用法. 例子
随机推荐
- Selenium2学习(十一)-- select下拉框
本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select 1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就是select选项框,打开页面 ...
- python编写脚本,删除固定用户下的所有表
脚本如下: [oracle@ycr python]$ more t_del.py #/usr/bin/python#coding:utf8 import sysimport cx_Oracle i=0 ...
- 一、Python安装下载
下载地址:https://www.python.org/downloads/ 因为Python3.X和2.X有部分不兼容,有些不向下兼容,现在3.5的资料和插件少,故我就学习的2.7.11了; 下载后 ...
- scrum和团队合作
一. 队名及宣言 队名 the better for you 宣言Change our lives with code 二. 队员及分工 a.承担软件工程的角色 姓名 学号 角色 张美庆 B20150 ...
- Kubernetes Helm入门指南
什么是Helm?这可不是暗黑破坏神里装备的名称:头盔,而是Kubernetes的一个包管理工具,用来简化Kubernetes应用的部署和管理.我们Helm和Kubernetes的关系,我们可以理解成y ...
- @WebListener 注解方式实现监听(eclipse和idea)
eclipse进行演示: 1.创建 Dynamic Web Project ,Dynamic Web module version选择3.0 2.在自动生成 的web.xml配置,增加 metadat ...
- 【luogu P3398 仓鼠找sugar】 题解
题目链接:https://www.luogu.org/problemnew/show/P3398 辣鸡树剖1300ms 倍增大法吼啊 #include <cstdio> #include ...
- 【luogu P1111 公路修建】 题解
题目链接:https://www.luogu.org/problemnew/show/P1111 考察并查集,运用kruskal的思想很好做.注意几个小问题即可. #include<iostre ...
- 我和我的广告前端代码(六):webpack工程合并、也许我不需要gulp
随着年初开始使用webpack重构公司的广告代码,已经有将近一年的时间了,需求也渐渐的稳定了.我想也是时候将这几个工程整理一下,顺带着处理一些历史问题. 由于当年各个业务线没有整合.需求也没有固定,考 ...
- reactJs 基础
react不是一个完整的mvc,mvvm框架. react跟web components 不冲突 背景原理:基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React ...