JS防抖与节流函数封装
防抖
在监听scroll事件的时候经常会用到防抖,当滚动到某一位置而触发状态,从而不会出现频繁滚动持续触发事件的情况
防抖的事件处理机制仅触发一次且必须是结束状态下才会执行
function debounce(callback, delay, immediate) {
let timer = null;
return function() {
const context = this,
args = arguments;
timer && clearTimeout(timer);
immediate && !timer && callback.apply(context, args); // 首次立即触发
timer = setTimeout(function() {
callback.apply(context, args);
}, delay);
}
}
window.addEventListener('scroll',
debounce(function() {
console.log(document.documentElement.scrollTop);
}, 300)
);
节流
防抖有个明显的缺点就是它在事件运行的过程中不能够执行事件,比如图片的懒加载就不能够满足,当滚动了很多但是由于没有停止导致图片仍然不会加载出来
节流的事件处理机制是在一定时间内无法重复调事件
function throttle(callback, delay) { // 定时器版
let timer = null;
return function() {
const context = this,
args = arguments;
if(!timer) {
timer = setTimeout(function() {
timer = null;
callback.apply(context, args);
}, delay);
}
};
}
function throttle(callback, delay) { // 时间戳版
let start = 0;
return function() {
const now = Date.now();
if(now - start > delay) {
start = now;
callback.apply(this, arguments);
}
}
}
window.addEventListener('scroll',
throttle(function() {
console.log(document.documentElement.scrollTop);
}, 1000)
);
JS防抖与节流函数封装的更多相关文章
- Js中的防抖与节流函数
1.何为防抖与节流函数呢? 1.防抖(debounce):通过setTimeout方式,在一定的时间间隔内,将多次触发的事件转化为一次触发.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于 ...
- 深入理解JS防抖与节流
参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...
- 因为它,我差点删库跑路:js防抖与节流
前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...
- 面试必问题:JS防抖与节流
摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
- JS防抖和节流:原来如此简单
一.函数防抖 前端开发工作中,我们经常在一个事件发生后执行某个操作,比如鼠标移动时打印一些东西: window.addEventListener("mousemove", ()=& ...
- 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...
- js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...
- js防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
随机推荐
- css颜色的设置
css的颜色设置 1.英文命令颜色 p{color:blue;}RGB颜色 2.与 photoshop 中的 RGB 颜色一致,由 R(red).G(green).B(blue) 三种颜色的比例来配色 ...
- MySQL 读写分离(转载)
原文地址:https://blog.csdn.net/justdb/article/details/17331569
- maven 灵活构建
灵活构建 项目的构建根据不同的情况可能需要有一定的差异,比如编译级别.依赖.打包的属性文件等在不同的运行环境中可能需要有不同的值.为了实现灵活构建,Maven内置了三个特性: 属性:在POM中通过${ ...
- 3-Longest Substring Without Repeating Characters @LeetCode
3-Longest Substring Without Repeating Characters @LeetCode 题目 题目中得到的信息有: 一段字符串找出不重复子串的最大长度,只需要长度信息. ...
- Java泛型相关总结(下)
约束与局限性 不能用基本类型实例化类型参数 不能像Pair<double>这样调用,只能Pair<Double>,原因是类型擦除 运行时类型查询只使用于原始类型 虚拟机中的对象 ...
- hanlp 加载远程词库示例
说明 ·目前的实现方式是以远程词库的内容重新构建CustomDictionary.trie,demo主要是为了实现同步远程词库,对性能暂不作考虑,对性能要求要以CustomDictionary.dat ...
- vn.trader的Ubuntu运行环境搭建教程
作者:量衍投资 转载请注明来源:维恩的派(www.vnpie.com) 准备Ubuntu 建议使用一个新安装干净的Ubuntu环境(如果你一定要使用老环境也行,万一不幸掉坑后再回到这步就好),我这里使 ...
- JVM-垃圾收集算法
新生代:复制算法,IBM研究过,约98%对象是“朝生夕死”,所以不需要按照1:1来划分:HotSpot中默认是8:1:1,即每次新生代可用空间为90%,只有10%会被“浪费”, 当Survivor空间 ...
- 猜测的rpc负载均衡原理,基于dubbo的架构
集群层(Cluster):封装多个提供者的路由及负载均衡,并桥接注册中心,以Invoker为中心,扩展接口为Cluster.Directory.Router和LoadBalance.将多个服务提供方组 ...
- FBI树-数据结构(二叉树)
问题 B: [2004_p4]FBI树-数据结构 时间限制: 1 Sec 内存限制: 125 MB提交: 57 解决: 46 题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称 ...