防抖节流基本原理及实现

防抖节流基本原理及实现1 防抖 防抖是指在事件触发 n 秒后再执行回调 如果在 n 秒内再次被触发 则重新计算时间 就是在触发某个事件后 在下一次触发之前 中间的间隔时间如果超过设置的时间才会发送请求 一直触发就不会发送请求 实现代码如下 func 代表一个函数 里面可能会频繁发生回调或 ajax 请求 delay 表示隔多少秒触发才触发 immediate 表示是否立即执行 可传 true 或 false 默认 falsefunctio func delay immediate result 表示返回

// func代表一个函数,里面可能会频繁发生回调或ajax请求,delay表示隔多少秒触发才触发,immediate表示是否立即执行,可传true或false,默认false function debounce(func,delay,immediate) { 
    // result表示返回值 let timeout,result let debounced = function () { 
    // 存储触发当前事件的this let _this = this // 存储event对象 let args = arguments clearTimeout(timeout) // 判断是否立即执行,如果不传默认不立即执行 if (immediate){ 
    // 立即执行 let callNow = !timeout timeout = setTimeout(()=>{ 
    timeout = null },delay) if (callNow) result = func.apply(_this,args) } else{ 
    timeout = setTimeout(function () { 
    func.apply(_this,args) },delay) } return result } debounced.cancel=function () { 
    clearTimeout(timeout) timeout = null } return debounced } 
// func代表可能会频繁发生回调或ajax请求的函数,delay表示等待时间,options为一个对象,leading =true时代表第一次立即执行,training = true 表示最后一次也会被执行 function throttle(func, delay,options) { 
    // 使用定时器和时间戳完成的第三版(第一次会触发,最后一次会触发) let context,args,timeout; // 之前的时间戳 let oldTime = 0 if (!options) options={ 
   } let later = function () { 
    oldTime = new Date().valueOf() timeout = null func.apply(context,args) } return function () { 
    context = this args = arguments // 获取当前时间戳 let now = new Date().valueOf() // 判断第一次是否执行 if (options.leading === false){ 
    // 不执行 oldTime = now } // 第一次会触发 if (now-oldTime > delay){ 
    if (timeout){ 
    // 清空定时器 clearTimeout(timeout) timeout = null } // 立即执行 func.apply(context,args) // 每隔delay秒执行一次 oldTime = now }else if (!timeout && options.trailing!==false){ 
    timeout = setTimeout(later,delay) } } } 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/218107.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 上午8:01
下一篇 2026年3月18日 上午8:01


相关推荐

  • Mac安装Git

    Mac安装Git文章目录一 简介二 下载指引三 配置信息一 简介在 Mac 上安装 Git 之前 可以先使用 gitversion 来查看一下是否安装了 Git 因为 Mac 系统可能自带了 Git 或者在你安装 XCode 或者 XCode 的命令行工具 时 可能已经安装了 Git 如果 Mac 还没有安装 Git 的话 则会跳出弹窗提示您安装 Git 上述是因为在安装 Homebrew 时 自动下载安装了 XCode 的命令行工具 所以已经安装了 Git 二 下载指引如果尚未安装 Git 或者已安装的 Git 版本过低 这里我们可以去 Git 官网 ht

    2026年3月26日
    1
  • setCompoundDrawables与setCompoundDrawablesWithIntrinsicBounds的区别

    setCompoundDrawables与setCompoundDrawablesWithIntrinsicBounds的区别

    2021年9月3日
    80
  • Capacitor电容

    Capacitor电容capacitor 无正负极性 capelectroli 有极性 实际中不能接反 否则电容会烧毁或爆炸 MULTISIM 仿真中接反会有漏阻存在 但不会烧毁 电容的分类按结构可分为 固定电容 可变电容 微调电容 按介质材料可分为 气体介质电容 液体介质电容 无机固体介质电容 有机固体介质电容 电解电容 按极性可分为 有极性电容和无极性电容 电容的作

    2026年3月17日
    1
  • 1、win10下的python3.5.4安装

    现在越来越多人入坑python了,当然我也不例外。作为一个java程序员的我,在空余时间就慢慢学习python了 。第一件事就是安装Python啦。(主要以Python 3.5.4为例)一、官网下载安装包官网地址:https://www.python.org/downloads/windows/ 都说越新越好嘛,其实我觉得都差不多,但是3.6跟3.5还是有点区别的嘛,所以我…

    2021年11月30日
    65
  • html css制作404页面,CSS3绘制404页面

    html css制作404页面,CSS3绘制404页面标题有点噱了…最近在做一个交通有关的项目,想做一个类似标志牌的404,所以就有了这个.只用的CSS3中的旋转,效果如下上代码:Error.circle{width:200px;height:200px;border-radius:200px;border:15pxsolid#B22727;}.circle>div{color:#B22727;font:bol…

    2022年7月27日
    9
  • 电脑蓝屏0X000000ED_0X000000ED

    电脑蓝屏0X000000ED_0X000000ED说到电脑问题,就不得不提蓝屏的问题。最近有位朋友的电脑开机的时候,并没有进入正常的启动程序,反而进入了蓝色界面,显示代码0x000000ed,不知道为什么会这样,也不知道如何去解决。下面就来看看蓝屏0x000000ed的原因和解决方法详解吧!蓝屏代码0x000000ed的原因详解!蓝屏现象,是我们在使用电脑中最常见的一种启动问题,而蓝屏显示的代码就是帮助我们去了解蓝屏的原因以及解决方法的主要依据。…

    2022年10月8日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号