函数节流你应该知道的那点事,建议收藏!
这里要给大家引入一个函数节流的概念,他的应用场景还是十分多的。下面小千就给大家分别从概念和案例分开介绍,喜欢的话不妨收藏起来。
什么是节流?
幼儿园所有的小朋友每天都要做3件事:吃饭、睡觉、打豆豆。只有一个小朋友例外,他的名字叫豆豆。后来,有一位善良勇敢的小朋友站出来说:你们不能这样打他了,这么打下去,会把他打死的,那我们以后就只能吃饭睡觉了!!所以从现在开始,我们每隔72小时,只能打1次豆豆,于是大家都纷纷表示赞同并流出了感动的泪水。
豆豆挨打的频率被降低了,这就叫节流。
列举一个实际的应用场景
一般情况下,当网页向下滑动的距离越来越长的时候,在右下角会出现一个回到顶部的按钮。
它的实现非常的简单
然而你很快就发现了这段程序的逻辑问题
那就是,scroll这种滚动事件的触发频率是非常高的,只要在页面上稍微滚动一下就会连续触发十几甚至二十几次事件,每一次我们都需要重新计算页面滚动距离,做判断,显示按钮等操作。
显然我们对该事件的触发频率不需要那么高,200ms一次似乎已经足够了。
于是,我们开始动手写代码。
函数节流(未优化版本)
如果你仔细的阅读了上面的代码,依然不能理解节流原理,我还有张原理图给你看
总结:
用节流的方式,可以保证在一段时间内,只有第一次执行是生效的,直到超过了设定的时间段,才有机会执行下一次,大大的降低了原有函数的执行频率,顾名思义,函数节流。
回过头来,我们再看代码
最后,参考函数防抖,再来做一点优化吧
关于函数节流的应用场景,给大家列举一下,仅供参考
- DOM 元素的拖拽(mousemove)
- 射击游戏在单位时间只能发射一颗子弹(mousedown/keydown)
- Canvas 模拟画板功能(mousemove)
- 懒加载,在滚动过程中判断是否需要加载图片(scroll)
- 页面滚动到底部加载更多(scroll)
本文来自千锋教育,转载请注明出处。
函数节流你应该知道的那点事,建议收藏!相关推荐
- 函数节流你应该知道的那点事
这里要给大家引入一个函数节流的概念,他的应用场景还是十分多的,下面就给大家分别从概念和案例分开介绍,喜欢的话不妨收藏起来. 什么是节流? 幼儿园所有的小朋友每天都要做3件事:吃饭.睡觉.打豆豆.只有一 ...
- 经常可能会用到的【函数节流和函数防抖】记录下,做下区分
今天突然被人问到,函数节流和函数防抖的区别是什么, 结果我脑子一热直接举了个滚动条的粟子说是优化高频率执行的手段,就记得自己是用setTimeout来实现的. 完了区别是什么??哪个是哪个都蒙B了 回 ...
- 函数防抖Debounce和函数节流Throttle
函数节流 & 函数防抖 函数节流和函数防抖 函数节流和函数防抖二者很容易被混淆起来.下面贴英文原文,建议认真阅读: Debouncing enforces that a function no ...
- 函数节流与防抖的实现
函数节流与函数防抖 最近由于处于互联网大厂的秋招季节,因此这些天都在看前端性能优化和算法方面的知识.在性能优化方面,看了网上的一些文章,同时看完了<高性能网站建设指南>和<高性能Ja ...
- 函数防抖和函数节流的最简单解释
函数防抖:连续触发的事件,只会触发最后一次.每次触发的时候都会清除上一次待触发的. const debounce = (func, wait) => {let timer;return (par ...
- JavaScript函数节流和函数防抖
1.为什么需要函数防抖和函数节流? 在浏览器中某些计算和处理要比其他的昂贵很多.例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间.连续尝试进行过多的DOM操作可能会导致浏览器挂起,甚至崩溃 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- 函数防抖 和 函数节流
函数防抖 和 函数节流 函数防抖(debounce) 概念 函数防抖 就是指 触发事件后 在 n 秒内 函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间. 简单的说,当一个动作 ...
- JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例
概念 函数防抖(debounce): 事件响应函数在一段时间后才会执行,如果在这段时间内再次调用,则重新计算执行时间:当预定时间内没有再次调用该函数,则执行响应逻辑. 函数节流(throttle): ...
最新文章
- selenium webdriver - 结束进程
- Linux学习之系统编程篇:IPC 和管道的基本概念及管道的创建
- JDBC和Ibatis中的Date,Time,Timestamp处理
- cassandra可视化工具_一位数据科学家的私房工具清单
- java classpath设置_Java CLASSPATH设置
- 出现这些迹象,说明你面试可能没戏了
- Ansible 系统概述与部署(1)
- python学习笔记(十一)-python程序目录工程化
- 一首歌是怎么诞生的?
- Atitit 常用数据校验规则
- [回帖整理] 创业难
- POJ 3667 Hotel (线段树区间合并)
- 数据分析EXCEL常用统计函数
- 7个良心到难以置信的自媒体免费网站推荐
- modbus主机、从机、虚拟串口调试软件
- Windows 10打开Java控制面板
- 【关于2022年卡塔尔世界杯】
- AD_Copy Room
- 量子计算机是否存在相对论,从量子到宇宙——颠覆人类认知的科学之旅
- Swift 如何生成随机数
热门文章
- Spring Cloud Security:Oauth2使用入门
- Struts2-获取值栈对象与结构
- HTTPS和HTTPS证书
- 跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
- BugKuCTF 加密 ok
- Bellman-Ford算法
- Linux中close的用法,linux下 open() write() read() close函数
- sprinigboot(2.2.4)+mysql引入druid的性能监控StateFilter
- proto的介绍和基础使用
- 【笔记】JAVA中的泛型和反射