今天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的更多相关文章

  1. 性能提速:debounce(防抖)、throttle(节流/限频)

    debounce与throttle是用户交互处理中常用到的性能提速方案,debounce用来实现防抖动,throttle用来实现节流(限频).那么这两个方法到底是什么(what)?为何要用(why-解 ...

  2. JS动画三剑客——setTimeout、setInterval、requestAnimationFrame

    一.前言 前端实现动画效果主要有以下几种方法:CSS3中的transition 和 animation ,Javascript 中可以通过定时器 setTimeout.setinterval,HTML ...

  3. HTML Standard系列:Event loop、requestIdleCallback 和 requestAnimationFrame

    HTML Standard系列:Event loop.requestIdleCallback 和 requestAnimationFrame - 掘金 https://juejin.im/post/5 ...

  4. 白话debounce和throttle

    遇到的问题 在开发过程中会遇到频率很高的事件或者连续的事件,如果不进行性能的优化,就可能会出现页面卡顿的现象,比如: 鼠标事件:mousemove(拖曳)/mouseover(划过)/mouseWhe ...

  5. 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  6. Debounce 和 Throttle 的原理及实现---防止频繁触发某事件

    原文:http://blog.csdn.net/redtopic/article/details/69396722 在处理诸如 resize.scroll.mousemove 和 keydown/ke ...

  7. debounce 与 throttle 区别

    原文地址:http://undefinedblog.com/debounce-and-throttle/ 二.什么是debounce    1. 定义 如果用手指一直按住一个弹簧,它将不会弹起直到你松 ...

  8. Debounce 和 Throttle【转载】

    在处理诸如 resize.scroll.mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有 ...

  9. angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

随机推荐

  1. Selenium2学习(十一)-- select下拉框

    本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就是select选项框,打开页面 ...

  2. python编写脚本,删除固定用户下的所有表

    脚本如下: [oracle@ycr python]$ more t_del.py #/usr/bin/python#coding:utf8 import sysimport cx_Oracle i=0 ...

  3. 一、Python安装下载

    下载地址:https://www.python.org/downloads/ 因为Python3.X和2.X有部分不兼容,有些不向下兼容,现在3.5的资料和插件少,故我就学习的2.7.11了; 下载后 ...

  4. scrum和团队合作

    一. 队名及宣言 队名 the better for you 宣言Change our lives with code 二. 队员及分工 a.承担软件工程的角色 姓名 学号 角色 张美庆 B20150 ...

  5. Kubernetes Helm入门指南

    什么是Helm?这可不是暗黑破坏神里装备的名称:头盔,而是Kubernetes的一个包管理工具,用来简化Kubernetes应用的部署和管理.我们Helm和Kubernetes的关系,我们可以理解成y ...

  6. @WebListener 注解方式实现监听(eclipse和idea)

    eclipse进行演示: 1.创建 Dynamic Web Project ,Dynamic Web module version选择3.0 2.在自动生成 的web.xml配置,增加 metadat ...

  7. 【luogu P3398 仓鼠找sugar】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3398 辣鸡树剖1300ms 倍增大法吼啊 #include <cstdio> #include ...

  8. 【luogu P1111 公路修建】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1111 考察并查集,运用kruskal的思想很好做.注意几个小问题即可. #include<iostre ...

  9. 我和我的广告前端代码(六):webpack工程合并、也许我不需要gulp

    随着年初开始使用webpack重构公司的广告代码,已经有将近一年的时间了,需求也渐渐的稳定了.我想也是时候将这几个工程整理一下,顺带着处理一些历史问题. 由于当年各个业务线没有整合.需求也没有固定,考 ...

  10. reactJs 基础

    react不是一个完整的mvc,mvvm框架. react跟web components 不冲突  背景原理:基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React ...