函数的节流和防抖

最新推荐文章于 2023-11-23 15:06:01 发布
最新推荐文章于 2023-11-23 15:06:01 发布
阅读量350 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/brokenkay/article/details/109540709
版权

节流函数

节流函数用于控制函数执行的频率.比如用户设置时间间隔为1秒,那么在1s的时间内函数只执行一次.

如果上面的表述还不清楚,通过下面的案例来深入理解.

不加节流函数

 window.onscroll = function (value) {
      console.log('移动了鼠标');
    };

在这里插入图片描述


从上面可以看出,不加节流函数时,滑动鼠标触发事件的次数是惊人的.如果被执行的函数里面包含了复杂的计算逻辑,在这么高的调用频率下,会造成严重的页面卡顿.



增加节流函数

   window.onscroll = throttle(function (value) {
      console.log('移动了鼠标');
    }, 1000);

在这里插入图片描述

节流函数将时间间隔设置为1000毫秒,不管怎么滑动,每隔一秒钟才会执行一次函数

节流函数不光在面试中会经常遇到,在实际的业务场景里也有广泛的应用.比如拖拽事件,GPS获取地理位置等.

借鉴underscore中的源码,下面由简入繁,一步步去实现一遍节流函数的编写.

版本1

从throttle函数的返回值可以看出来,传入原始函数,它会返回一个新函数,新函数和原始函数相比,只多了一个节流功能,其他与原始函数保持一致.

第一版先返回一个新函数,在新函数内调用原始函数.

 const fun = throttle(function (value) {
      console.log(value);
 });
    fun(123);
    fun(456);
    fun(789);

function throttle(fn) {
  return function () {
    fn.apply(null, arguments);
  };
}

版本2

传入时间间隔1000毫秒，期待每过1秒钟执行一次原始函数.

 const fun = throttle(function (value) {
      console.log(value);
    }, 1000);
    fun(123);
    fun(456);
    fun(789);

/**
 *
 * @param {*} fn
 * @param {*} wait 延迟时间
 *
 */
function throttle(fn, wait) {
  let last_time = 0,args;

  let timer;

  return function () {
    let now_time = new Date().getTime(); //now_time本次运行该函数时的时间戳

    let remain = wait - (now_time - last_time); //last_time上次运行该函数的时间戳

    args = arguments;

    if (remain <= 0) {
      //已经到了间隔时间,可以运行该函数
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      fn.apply(null, args);
      last_time = now_time;
    } else if (!timer) {
      timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
        fn.apply(null, args);
        last_time = now_time;
      }, remain);
    }
  };
}



123被立刻打印出,过了1秒钟789被打印.456没有被打印

每次调用增强后的函数时,会将本次运行的时间戳(now_time)和上一次运行的时间戳(last_time)的差值与wait进行比较,如果还在间隔时间内,就设置定时器等待执行.如果过了间隔时间就立即执行.

fun(123);fun(456);fun(789);这三句代码是同步执行的,123会立即执行输出,456由于还在间隔时间的限制内,被设置成了定时器延缓执行.789仍然在间隔时间的限制内,但已经存在了定时器,因此这次操作会被舍弃掉,但是它仍然把args更新为789,因此最后定时器函数执行时输出的就是789

将上面重复代码的部分封装成exec函数,如下:

/**
 *
 * @param {*} fn
 * @param {*} wait 延迟时间
 *
 */
function throttle(fn, wait) {
  let last_time = 0,args;

  let timer;

  function exec(args) {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    fn.apply(null, args);
    last_time = new Date().getTime();
  }

  return function () {
    let now_time = new Date().getTime(); //now_time本次运行该函数时的时间戳

    let remain = wait - (now_time - last_time); //last_time上次运行该函数的时间戳

    args = arguments;

    if (remain <= 0) {
      //已经到了间隔时间,可以运行该函数
      exec(args);
    } else if (!timer) {
      timer = setTimeout(() => {
        exec(args);
      }, remain);
    }
  };
}

版本3

当前函数已经具备基础的节流功能了,但在有些应用场景下期待节流函数第一次不执行或者最后一次不执行.

在时间参数后面再加一个配置项,将节流函数的功能继续完善:

leading设置为false时:第一次不立即执行,而是延时后再执行.
trailing设置为false是:第一次会立即执行,最后一次被延时的函数不执行.

  const fun = throttle(
      function (value) {
        console.log(value);
      },
      1000,
      {
        leading: false,
      }
    );
    fun(123);
    fun(456);
    fun(789);

/**
 *
 * @param {*} fn
 * @param {*} wait 延迟时间
 *
 */
function throttle(fn, wait, params) {
  let last_time = 0,args;
  let timer;
  if (params == null) {
    params = {};
  }
  function exec(args) {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    fn.apply(null, args);
    last_time = new Date().getTime();
  }

  return function () {
    let now_time = new Date().getTime(); //now_time本次运行该函数时的时间戳

    if (!timer && params.leading === false) {
      //让第一次不立即执行,延迟后再执行
      last_time = now_time;
    }

    let remain = wait - (now_time - last_time); //last_time上次运行该函数的时间戳

    args = arguments;

    if (remain <= 0) {
      //已经到了间隔时间,可以立即执行该函数
      exec(args);
    } else if (!timer && params.trailing !== false) { //trailing控制处于间隔时间内的延时函数不执行
      //延迟执行
      timer = setTimeout(() => {
        exec(args);
      }, remain);
    }
  };
}

params.leading为false时,界面延迟1秒后再输出789,不会再输出其他内容.
params.trailing为false时,界面立即输出123,不会再输出其他内容.

通过 !timer && params.leading === false 判断第一次是否立即执行.如果为true,那么last_time被赋予now_time,remian一定大于0,因此第一次就会延迟执行.

版本4(最终版)

如果原始函数有返回值,那么期待增强后的节流函数也能有返回值,继续改进.

  const fun = throttle(function (value) {
      return value;
    }, 1000);
    console.log(fun(123));
    console.log(fun(456));
    console.log(fun(789));

/**
 *
 * @param {*} fn
 * @param {*} wait 延迟时间
 *
 */
function throttle(fn, wait, params) {
  let last_time = 0,args;
  let timer, result;
  if (params == null) {
    params = {};
  }
  function exec(args) {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    result = fn.apply(null, args);
    last_time = new Date().getTime();
  }

  return function () {
    let now_time = new Date().getTime(); //now_time本次运行该函数时的时间戳

    if (!timer && params.leading === false) {
      //让第一次不立即执行,延迟后再执行
      last_time = now_time;
    }

    let remain = wait - (now_time - last_time); //last_time上次运行该函数的时间戳

    args = arguments;

    if (remain <= 0) {
      //已经到了间隔时间,可以立即执行该函数
      exec(args);
    } else if (!timer && params.trailing !== false) {
      //延迟执行
      timer = setTimeout(() => {
        exec(args);
      }, remain);
    }
    return result;
  };
}

函数内添加一个result变量用来存储返回值.当输入为123的函数运行,将结果存储到result中.输入为456和789的函数因为还在间隔时间内不能执行函数,只能返回上一次计算的result值,因此也为123.

防抖函数

防抖函数也是用于控制函数执行的频率,不过它与节流函数不一样.它是在间隔时间内监测到再没有外部函数调用时才开始执行一次,借助下面的案例来加深理解.

不加防抖函数

   const user_name = document.getElementById('user_name');
    user_name.oninput = function () {
      console.log(`输入了${user_name.value},发送给后台模糊查询`);
    };

在这里插入图片描述

不加防抖函数时,输入一个字符就会执行一次函数.假如这是一个模糊搜索产品名称的输入框,每输入一个字符就向后端发送一个ajax请求,势必会造成性能上的大量损耗.

加了防抖函数

  const user_name = document.getElementById('user_name');
    user_name.oninput = debounce(function () {
      console.log(`输入了${user_name.value},发送给后台模糊查询`);
    }, 500);

在这里插入图片描述

加了防抖函数后神奇的发现,用户在输入过程中是不会执行函数的.直到不再输入后再等待500毫秒才会执行一次.

版本1

传入时间参数500毫秒,期待500毫秒内没有监听到外部的函数调用后才执行函数.

  const user_name = document.getElementById('user_name');//页面的input
    user_name.oninput = debounce(
      function () {
        console.log(`输入了${user_name.value},发送给后台模糊查询`);
      },
      500
    );

function debounce(fn, wait) {
  let timer, args, result;
  let last_time = 0;

  function later() {
    clearTimeout(timer);
    timer = null;
    const now_time = new Date().getTime();
    const last = now_time - last_time;
    if (last < wait) {
      timer = setTimeout(later, wait - last);
    } else {
      result = fn.apply(null, args);
    }
  }

  return function () {
    args = arguments;
    last_time = new Date().getTime();
    if (!timer) {
      timer = setTimeout(later, wait);
    }
    return result;
  };
}

外部每一次调用函数时,都会将当前的时间戳赋予last_time.在延迟函数里,通过now_time和last_time的差值与wait进行比较,可以判断有没有处于间隔期内,如果还在间隔期就重新设定定时器延迟执行.如果过了间隔期仍然没有外部调用时就可以执行函数了.

版本2(最终版)

调用时加入第三个参数immediate,当其为true时期待首次调用立即执行,后续在间隔时间内调用都不执行.

其实就是在上面的逻辑里,把函数的执行放到了最前面.

  const user_name = document.getElementById('user_name');
    user_name.oninput = debounce(
      function () {
        console.log(`输入了${user_name.value},发送给后台模糊查询`);
      },
      500,
      true
    );

function debounce(fn, wait, immediate) {
  let timer, args, result, call_now;
  let last_time = 0;

  function later() {
    const now_time = new Date().getTime();
    const last = now_time - last_time;
    if (last < wait) {
      timer = setTimeout(later, wait - last);
    } else {
      clearTimeout(timer);
      timer = null;
      if (!immediate) {
        result = fn.apply(null, args);
      }
    }
  }

  return function () {
    args = arguments;
    call_now = immediate && !timer; //是否立即执行
    last_time = new Date().getTime();
    if (!timer) {
      timer = setTimeout(later, wait);
    }
    if (call_now) {
      result = fn.apply(null, args);
    }
    return result;
  };
}

在这里插入图片描述

_Kay_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
C# 函数防抖
Dear200892的博客
07-11 962
当我们在编写 GUI 界面或响应用户输入的操作时，经常会遇到一些情况：用户可能会频繁触发某个事件，导致界面或系统反应过于频繁，甚至会引发性能问题。防抖函数有效限制了频繁操作的执行次数，减少了不必要的资源消耗。在某些场景下，可提升用户体验，避免由于操作过快导致的问题。
C#.Net下的防抖-Debounce和节流阀-Throttle功能实现
cxu123321的博客
07-16 2841
C#.Net下的防抖-Debounce和节流阀-Throttle功能实现 C#下的防抖-Debounce、节流阀-Throttle功能实现 防抖-Debounce 连续的多次调用，只有在调用停止之后的一段时间内不再调用，然后才执行一次处理过程。 节流阀-Throttle 连续的多次调用，在每个时间段的周期内只执行第一次处理过程。 代码如下： using System; usi...
C# 函数节流，简单易懂的节流（Throttler）教程
最新发布
ゞ舍予的博客
11-23 152
节流算法是一种用于`控制函数执行频率`的技术。它通过`限制函数在一定时间间隔内的执行次数`，以避免过多的函数调用，`提高性能`和`资源利用`率。常见的节流算法有`定时器`节流和`时间戳`节流两种实现方式。定时器节流在函数调用后设定一个定时器，在定时器到期前不再执行函数；时间戳节流则是记录上次函数执行的时间戳，在一定时间间隔内只有当当前时间超过上次执行时间加上设定的时间间隔时才执行函数。
Winform窗体防抖动
随笔
09-27 713
using System; using System.Threading.Tasks; using System.Windows.Forms; using Model; using System.Runtime.InteropServices; namespace Web { public partial class FrmMain : Form { //防抖动 [DllImport("user32.dll")] public static e
一张图搞清楚防抖和节流的区别
HYeeee的博客
07-18 7315
1、防抖（debounce） 指在时间n内，函数被触发多次，但是只执行一次，执行最新的触发。也就是在时间n内，碰到新的触发，就清除之前的，重新计时。 最简单的实现 function debounce(func, wait) { var timeout; return function () { clearTimeout(timeout) timeou...
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
JS函数节流和函数防抖问题分析
10-18
JavaScript中的函数节流（throttle）和函数防抖（debounce）是两种常见的优化策略，它们主要用于控制函数的执行频率，以避免在高频率事件触发时导致性能问题或不必要的资源消耗。 函数防抖（debounce）的核心思想是...
函数节流和函数防抖（键盘输入完成触发搜索）.rar
06-16
节流保证一段时间内只执行一次核心代码，防抖其实就是搜索功能的实现。。。。滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。同样的，如果不对函数调用的频率加以限制的话，那么...
防抖函数/防抖的详细讲解/防抖的代码实现
m0_56986233的博客
03-04 2391
防抖函数 要求： 当持续触发事件，一定时间内没有再触发事件，事件处理函数才会再执行一次* 当设定的事件来到之前，有一次触发了事件，就重新开始延时 代码的详细讲解 // 防抖函数 要求 // 当持续触发事件，一定时间内没有再触发事件，事件处理函数才会再执行一次 // 当设定的事件来到之前，有一次触发了事件，就重新开始延时 var input = document.querySelector('#input') // 防抖函数 function debounce(del
函数防抖和节流
MyStyle
08-15 625
函数节流 函数防抖
前端节流和防抖
weixin_44425559的博客
11-10 206
为什么要使用节流和防抖 我在写商品上拉加载时，重复在数据库拿数据，这时候，就要使用节流和防抖。 在进行窗口的scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。 此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 如何理解防抖 当你点击时，等待2秒后才触发事件，但是当你在2秒内继续点击，就会重新延迟2秒执行。 如何理解节
性能优化之节流函数---throttle
weixin_34310127的博客
05-08 348
防抖函数和节流函数本质是不一样的。防抖函数是将多次执行变为最后一次执行或第一次执行，节流函数是将多次执行变成每隔一段时间执行。 节流函数 前言 防抖函数和节流函数本质是不一样的。防抖函数是将多次执行变为最后一次执行或第一次执行，节流函数是将多次执行变成每隔一段时间执行。 比如说，当当我们做图片懒加载（lazyload）时，需要通过滚动位置，实时显示图片时，如果使用防抖函数，懒加载（lazyloa...
浅谈函数节流
筱葭的博客
04-16 7692
鼠标的mousemove、scroll，浏览器窗口的resize事件等，都是在短时间内重复触发。以onresize事件为例，若事件处理程序需要进行修改元素宽度高度等操作，那么频繁的触发事件会导致频繁的重绘页面。 DOM操作比非DOM交互需要更多的内存和CPU时间，连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。为了解决这个问题，需要使用定时器对该函数进行节流。 函数节流
函数节流(throttle)和函数去斗(debounce)
不忘初心，方得始终
05-31 2084
一.函数节流和函数去斗是解决什么问题的：大家都知道，人的眼睛能感知的最快反应速度是在0.1秒到0.4秒之间，所以0.1秒内的变化从视觉上来说是无意义的。而且如果涉及dom操作，或者网络操作会严重浪费资源，可能导致浏览器崩溃，或者服务器崩溃。例如一下场景：（1）浏览器滚动事件scroll  (2)  鼠标的点击事件 mouseup, mousedown,mousemove  (3)  键盘的keyu...
防抖节流函数
景色分明
07-05 1880
文章目录防抖节流 防抖 概念 : n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 使用场景： 输入框 实现： 1.最初的想法： 高频函数作为参数，和延时时间 传给debounce函数，然后染回一个新函数，使得整个函数具有防抖功能。 首先想到使用闭包，这样可以具有保存变量的能力 重新计时一定需要用到计时器的创建和清除 const debounce = (fn, delay) => { let id return function(...args) { // 不能使用箭头函数
防抖（debounce）
qq_41988113的博客
04-28 612
应用场景：滚动条事件监听 问题1：为什么需要使用防抖函数？举个例子 在项目中，我们可能需要通过监听图片的加载来重新获取（条用scroll.refresh函数）滚动的区域（scrollerHeight）,我们一次请求的图片可能是很多张，而请求的速度也比较快，就会出现在短时间内频繁执行refresh函数，致使服务器性能降低。 解决方法： 利用防抖函数，在某个时间期限内，事件处理函数只执行一次 /* * 封装一个防抖函数 * 防抖函数传入两个参数 *...
防抖与节流函数
Geordies的博客
02-29 349
# 防抖与节流函数 防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。 区别在于，防抖函数只会在高频事件结束后n毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔n毫秒调用一次函数。 # 防抖函数 触发高频事件后一段时间(wait)只会执行一次函数，如果指定时间(wait)内高频事件再次被触发，则重新计算时间。 # 封装 // 防抖函数 function debounc...
js函数节流和函数防抖
08-30
- *2* [js中的函数防抖和函数节流](https://blog.csdn.net/m0_52900946/article/details/124778757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值