js实现之--防抖节流【理解+代码】

摘要:
直到最终满足条件并等待延迟时间,才执行处理程序函数//Func是用户传入的函数,需要防抖//Wait是等待时间constdebounce=(func,{//Cache a timer idletimer=0//此处返回的函数是用户每次实际调用的防抖函数。//如果计时器已设置,请清除最后一个计时器。//启动新计时器。

防抖:

    理解:在车站上车,人员上满了车才发走重点是人员上满触发一次。

    场景:实时搜索,拖拽。

    实现:

        //每一次都要清空定时器,重新设置上计时器值,使得计时器每一次都重新开始,直到最后满足条件并且等待delay时间后,才开始执行handler函数。

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器,延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}
// 不难看出如果用户调用该函数的间隔小于wait的情况下,上一次的时间还未到就被清除了,并不会执行函数


节流:

    理解:大于等于10分钟发一次车,重点是一定间隔时间就会触发一次。

            (即预定一个函数只有在大于等于执行周期时才会执行,周期内不执行)。

    场景:窗口调整(调整大小),页面滚动(滚动),抢购时疯狂点击(鼠标按下)

    实现:

        //处理程序是要传入的进行节流的函数,wait是上述的间隔时间。

        //使用时间戳进行时间的计算。

function throttle(handler,wait){ //handler是要进行节流的函数,wait是等待时间
   var lastTime = 0;
    return function(){
        var nowTime = new Date().getTime();    //获取当前时间
        if(nowTime - lastTime> wait){
            handler.apply(this,arguments);
            lastTime = nowTime;      //更新最后时间
        }
     }
}

免责声明:文章转载自《js实现之--防抖节流【理解+代码】》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Qt中 .pro 文件和 .pri 文件简介元素跟随着滚动条运动下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Wireshark——过滤器

一、捕获过滤器 选中捕获选项后,就会弹出下面这个框,在红色输入框中就可以编写过滤规则。 1)捕获单个IP地址 2)捕获IP地址范围 3)捕获广播或多播地址 4)捕获MAC地址 5)捕获所有端口号 6)捕获特定ICMP数据 当网络中出现性能或安全问题时,将会看到ICMP(互联网控制消息协议)。 在这种情况下,用户必须使用一个偏移量表示一个ICMP...

Nginx日志运维笔记

在分析服务器运行情况和业务数据时,nginx日志是非常可靠的数据来源,而掌握常用的nginx日志分析命令的应用技巧则有着事半功倍的作用,可以快速进行定位和统计。 1)Nginx日志的标准格式(可参考:http://www.cnblogs.com/kevingrace/p/5893499.html) log_format main '$remote_ad...

Haar小波分析

一 尺度函数与小波函数     基本尺度函数定义为:,对其向右平移任意 k 个单位,构成函数族 , 该函数族在 空间中正交,证明如下:    1 ;    2 当 m 不等于 k 时,    函数族  构成一组正交基,并形成  子空间。在  子空间中,任意函数均可表示为  的线性组合,。    将函数族  构造宽度缩小一半,则可形成宽度为  的一组正交基...

软件测试需求分析与跟踪

1.1  需求的重要性 1.1.1 软件缺陷的8020原则 1)      在软件测试过程中,从需求分析开始到集成测试阶段引入测试手段,能发现所有缺陷的80%;系统测试阶段引入测试手段,能发现剩余缺陷中80%的缺陷;在运行维护阶段经过长时间、大量运行软件后,能够发现最后剩余的20%的缺陷。     1.2   软件需求 1.2.1  软件需求的定义 1)...

【STM32H7】第6章 ThreadX操作系统移植(IAR)

论坛原始地址(持续更新):http://www.armbbs.cn/forum.php?mod=viewthread&tid=99514 第6章   ThreadX操作系统移植(IAR) 本章节将为大家介绍ThreadX内核的IAR方式移植和设计框架,理论上不建议初学者直接学习,因为本章节涉及到的知识点很多,建议对ThreadX的应用有一些了解后再...

Android Studio 自定义签名,代码段快捷键

此篇文章主要介绍如何在Android Studio中函数如何添加注释,使其和eclipse一样方便的添加注释 Android Studio默认函数注释为 /** * */ 下面方法将要改为如下格式 1 2 3 4 5 /**  *  * @author zony  * @time 15-11-25 下午2:41  */ 步...