• 关于js_节流的介绍和简单的使用


    js_节流

    一.背景

    如果在限定时间段内,不断触发滚动事件(比如某个用户闲着无 聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远 不会输出当前距离顶部的距离

    但是如果产品同学的期望处理方案是:即使用户不断拖动滚动条, 也能在某个时间间隔之后给出反馈呢?

    其实很简单:我们可以设计一种类似控制阀门一样定期开放的函 数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这 段时间后再重新激活(类似于技能冷却时间)

    效果:如果短时间内大量触发同一事件,那么在函数执行一次之 后,该函数在指定的时间期限内不再工作,直至过了这段时间才重 新生效。

    常见业务:

    1. 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内 容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使 用哪种方案要看业务需求

    2. 页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这 种情形一般是使用防抖,因为只需要判断最后一次的变化情况)

    二.实例

    滚动条定期输出高度:

    
    
    
        
        
        
        Document
        
    
    
        

    哈哈哈

       

    哈哈哈

       

    哈哈哈

       

    哈哈哈

       

    哈哈哈

       

    哈哈哈

       

  • 相关阅读:
    十五.镜头知识之景深(Depth of Field)
    Mybatis知识【Mybatis概述】第一章
    VScode运行C/C++
    TransmittableThreadLocal - 线程池中也可以传递参数了
    C# 控制台应用模板可生成顶级语句
    动手学深度学习(1)—— 基础知识
    Nginx 学习 常用链接汇总
    Spring Boot整合日志
    [VIM]VIM初步学习-3
    保证Redis和数据库数据一致性的方法
  • 原文地址:https://blog.csdn.net/qq_55961861/article/details/126362092