Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >函数节流和去抖的用法和区别

函数节流和去抖的用法和区别

作者头像
马克社区
发布于 2022-04-11 11:37:11
发布于 2022-04-11 11:37:11
15600
代码可运行
举报
文章被收录于专栏:高端IT高端IT
运行总次数:0
代码可运行

我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所以在处理类似的情况时,可以考虑使用函数节流和函数去抖来解决,至于具体使用哪一种方式,根据实际情况分析定夺,先来讲解一些这两者的概念,以下是我个人的一些看法,若有不足,希望大家可以提出.

函数节流

在频繁触发的情况下,需要执行的逻辑只有执行完之后,才能继续执行下一次.示例代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 函数节流例子
var can = true;
window.onscroll = function(){
  if(!can){
   //判断上次逻辑是否执行完毕,如果在执行中,则直接return
   return;
  }
  can = false;
  setTimeout(function(){
    //执行逻辑
    can = true;
  }, 100);
};

函数去抖

在频繁触发的情况下,只有足够的空闲时间,才执行代码一次,如果没有执行完就清除掉,重新执行逻辑,示例代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 函数去抖
var timer = null;
window.onscroll = function(){
    if (timer) {
      // 清除未执行的逻辑,重新执行下一次逻辑,不论上一次是否执行完毕
      clearTimeout(timer); 

更多内容请见原文,文章转载自:https://blog.csdn.net/weixin_44519496/article/details/118522735

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript中的函数防抖与函数节流
函数防抖(debounce)当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。
刘亦枫
2020/03/19
6080
javaScript 函数节流
什么是javascript函数节流?从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。 函数节流的经典应用场景:onresize,scroll,mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器,通过设置缓冲时间,在第一次调用时,创建定时器,并在定时时间
用户1097444
2022/06/29
5330
javaScript 函数节流
javaScript 函数节流
IMWeb前端团队
2018/01/08
9800
javaScript 函数节流
JavaScript函数节流和函数防抖之间的区别
函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的。反而形成一种视觉效果,就是一张图。就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样。  同理,可以类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
我是leon
2019/08/28
1.1K0
JavaScript函数节流和函数防抖之间的区别
【JS】javaScript 函数节流
什么是javascript函数节流?从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
Ning@
2021/11/10
1.1K0
防抖函数与节流函数
原文 https://www.cnblogs.com/chenqf/p/7986725.html
yangdongnan
2019/07/02
9590
JavaScript网页性能优化(函数防抖与函数节流)
b.输入框事件:验证手机号或者邮箱,用户输入时不断触发键盘事件,应该等用户结束输入之后,以最后一次输入为准
帅的一麻皮
2020/05/16
1.5K0
防抖和节流
在实际开发中,我们会遇到这么一个场景:我们需要注册一个事件,但有时候这个事件会在短时间内频繁触发,事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况,为些我们需要通过一些手段来解决这个问题,所以就有了防抖和节流这两个技术。
用户8921923
2022/10/24
6680
前端性能优化之:函数防抖与函数节流
函数防抖和函数节流是在前端性能优化中老生常谈的话题,也是各位前端的童鞋必须要掌握的性能优化手段。今天胡哥为大家分享函数防抖和函数节流的相关原理以及具体实践场景,希望能够给各位小伙伴在工作中提供相应业务场景的解决方案。
胡哥有话说
2019/07/30
6120
函数节流与防抖
函数防抖,就是指触发事件后在一定时间内函数只能执行一次,如果在这段时间内再次触发,则会重新计时,直到事件触发后一定时间内不再触发
小丞同学
2021/08/16
4860
函数防抖与函数节流
有一些浏览器事件我们不希望它很频繁的触发,如调整窗口大小(onresize)、监听滚动条滚动(onscroll),如果这些监听事件需要调用接口的话一秒内可能会调用上百次,这样坑定是有问题的。
全栈程序员站长
2022/07/21
2060
【面试题】防抖和节流的理解,及其应用场景
区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。
用户9914333
2022/07/22
6.3K0
函数的防抖与节流
当用户频繁的与UI界面操作交互时,例如:窗口调整(触发resize),页面滚动,上拉加载(触发scroll),表单的按钮提交,商城抢购疯狂的点击(触发mousedown),而实时的搜索(keyup,input),拖拽等
itclanCoder
2023/10/07
3700
函数的防抖与节流
简单复习下什么是JavaScript的防抖和节流
使用场景:click、onMouseOver,onMouseMove,resize,input,scroll等
前端达人
2021/06/16
5540
函数节流与函数防抖
函数节流与函数防抖 函数节流和函数防抖是一个老生常谈的话题了,两者都是对大量频繁重复调用代码的一种优化方案 今天在某群和大家讨论时,顺便搜了一些相关博客 发现有一篇关于两者的定义竟然写反了。。。所以
贾顺名
2018/04/12
9900
函数节流与函数防抖
JavaScript进阶之路系列(三):节流防抖
问题提出: 假如你要提交一个表单,你点击了按钮,出发了提交操作。这时候,你的网络不太好,提交的请求还没得到返回的时候,你又点击了一次按钮,提交了两次,怎么办,又点击了一下,提交了三次,怎么办?
刘亦枫
2020/04/09
8080
underscore函数节流
上面提到了函数调用频次, 这个频次也就是调用时间, 所以在underscore中关于throttle函数是基于定时器与时间差来调用函数运行的频次。还有就是throttle函数接收三个参数, 关于最后一个参数我到最后再讲。 我们看下源码:
用户9298250
2022/01/10
4640
js中的防抖和节流
原理:设置一个定时器,如果在设定的时间间隔内事件再次触发,就会清除上一次的定时器并重新设置和计时,直到指定时间间隔内没有再次触发,才会执行函数
前端小tips
2021/11/24
2K0
js中的防抖和节流
函数防抖和函数节流的简单实现和探讨
上面有个问题就是如果再场景2那种情况,用户提交数据请求是发不出去的。而且不停点击,请求就一直不发,这显然是不科学的,我们就要改进这个函数了。
ACK
2020/01/14
5880
JavaScript 高频函数优化-函数防抖&函数节流
什么是高频函数? oninput(实时获取输入的数据) onscroll(监听页面的滚动) onresize(监听浏览器可视区域的变化) onmousemove(移动端监听手指在屏幕的滑动) 什么是函
前端小tips
2021/11/24
3990
JavaScript 高频函数优化-函数防抖&函数节流
相关推荐
JavaScript中的函数防抖与函数节流
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档