戳蓝字"Web前端严选"关注我们哦！

手写防抖和节流

1.引言

「防抖和节流的产生」

浏览器的resize、scroll、keypress、mousemove操作时会频繁触发，如果我们在回调中计算元素位置、做一些跟DOM相关的操作，引起浏览器回流和重绘，频繁触发回调，很可能会造成浏览器掉帧，甚至会使浏览器崩溃，影响用户体验。针对这种现象，目前有两种常用的解决方案：防抖和节流。

2.防抖

function debounce(fn,delay){ let timer = null; return function(){  clearTimeout(timer);  timer = setTimeout(function(){   fn.call(this,...arguments)  },delay) }}

防抖：多次事件触发，只执行一次

举例形容一下，就是得帕金森的手去拿一杯水，虽然手抖动很多次，但是拿水的动作只执行一次

body.onscroll = debounce(function(){ console.log("防抖")},1000)

3.节流

function throttle(fn,delay){ let start = Date.now(); return function(){  let last = Date.now();  if(last - start > delay){   fn.apply(this,arguments);   start = last;  } }}

节流：事件触发，固定时间内执行一次

举例形容一下，就是水管每小时流2立方米水，节流减少到每小时流1立方米水

body.onscroll = throttle(function(){ console.log("节流")},1000)

❤️ 感谢大家

如果你觉得这篇内容对你挺有有帮助的话：

点赞支持下吧，让更多的人也能看到这篇内容(收藏不点赞，我就嘤嘤嘤 -_-)
关注公众号【Web前端严选】，定期为你推送好文。

添加个人微信，进群与小伙伴一起玩耍(已经推出)~

点个在看，大家都看

防抖节流_面试必备考点：防抖与节流相关推荐

反向代理post参数怎么传输_面试必备：GET和POST的区别详细解说
点击右上方红色按钮关注"web秀",让你真正秀起来前言最近一些小伙伴面试都会被问到 get 和 post 的区别,很多都只能简单的说几点,今天我们就来把弄的明明白白,彻彻底底. ...
游戏必备组件有哪些_面试必备：2019Vue经典面试题总结（含答案）
点击右上方红色按钮关注"web秀",让你真正秀起来面试必备:2019Vue经典面试题总结(含答案) 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写 ...
mysql面试吗hi提_面试必备的10道MySQL题
MySQL 事务,是我们去面试中高级开发经常会被问到的问题,很多人虽然经常使用 MySQL,SQL 语句也写得很溜,但是面试的时候,被问到这些问题,总是不知从何说起.下面我们先来了解一下什么是 MyS ...
get请求可以传body吗_面试必备：GET和POST的区别详细解说
点击右上方红色按钮关注"web秀",让你真正秀起来前言最近一些小伙伴面试都会被问到 get 和 post 的区别,很多都只能简单的说几点,今天我们就来把弄的明明白白,彻彻底底. ...
怎么用Python写出随时间变化的字_面试必备 | 带你彻底搞懂 Python 生成器
文章转载地址:面试必备 | 带你彻底搞懂 Python 生成器. 写在之前 Python 的高级语言特性一直是我们学习 Python 的一个难点,大部分人并没有做到熟练的掌握,甚至去学习它都感觉很困难 ...
oracle中join另一个表后会查询不出一些数据_面试必备 | 8个Hive数据仓工具面试题锦集！...
是新朋友吗?记得先点蓝字关注我哦- 今日课程菜单 Java全栈开发 | Web前端+H5 大数据开发 | 数据分析人工智能+Python | 人工智能+物联网进入数据时代,大数据技术成为互联网发 ...
collection集合多少钱_面试必备-Java集合框架
Java集合框架面试题常见集合集合可以看作是一种容器,用来存储对象信息. 数组和集合的区别: (1)数组长度不可变化而且无法保存具有映射关系的数据:集合类用于保存数量不确定的数据,以及保存具有映射 ...
flex 左右布局_面试必考点：前端布局知识
前端的页面布局知识是初中级前端工程师必须掌握的内容,在面试的时候无论大厂小厂都有很大概率被提问到,作为与页面最紧密的前端开发者,前端布局知识是必不可少的一环. 前言这里所要介绍的布局知识主要是在解决 ...
tcp报文格式_面试必备TCP(一)：三次握手
TCP大家都知道是什么东西,这个协议的具体报文格式如下: 标志位 URG:指示报文中有紧急数据,应尽快传送(相当于高优先级的数据). PSH:为1表示是带有push标志的数据,指示接收方在接收到该报文 ...

防抖节流_面试必备考点：防抖与节流

戳蓝字"Web前端严选"关注我们哦！

手写防抖和节流

1.引言

2.防抖

3.节流

❤️ 感谢大家

防抖节流_面试必备考点：防抖与节流相关推荐

最新文章

热门文章

防抖 节流_面试必备考点：防抖与节流

戳蓝字"Web前端严选"关注我们哦！

手写防抖和节流

1.引言

2.防抖

3.节流

❤️ 感谢大家

防抖 节流_面试必备考点：防抖与节流相关推荐

最新文章

热门文章

防抖节流_面试必备考点：防抖与节流

防抖节流_面试必备考点：防抖与节流相关推荐