前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >函数节流和去抖的用法和区别

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

作者头像
马克社区
发布2022-04-11 19:37:11
1400
发布2022-04-11 19:37:11
举报
文章被收录于专栏:高端IT

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

函数节流

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

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

函数去抖

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

代码语言:javascript
复制
// 函数去抖
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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档