zoukankan      html  css  js  c++  java
  • JS 的防抖和节流

    从实用角度来说,JS的防抖和节流,属于前端技术的“性能优化”。

    防抖:

    假设有一个事件函数,在第一次触发该事件时,先不执行函数,而是等待1秒后再执行,那么:

      1. 如果在1秒内再次触发该事件,则该事件函数不执行,1秒时间重新计算

      2. 如果在1秒内没有再次触发该事件,则执行该事件函数

    达到的效果就是,在1秒内多次触发事件,只会执行一次函数。

    既然涉及到了计时,那么就需要 setTimeOut 这个函数,还需要一个变量来存储这个计时,考虑保护全局变量纯净,我们可以使用闭包处理。

    节流:

     假设有一个事件函数,在第一次触发该事件后,设定一个阈值1秒,在这1秒内不论触发多少次事件,都不执行函数。等1秒时间到了,不论有没有触发事件,都执行一次函数。

    使用场景:

    1. 搜索框input事件,例如要支持输入实时搜索可以使用节流方案(间隔一段时间就必须查询相关内容),或者实现输入间隔大于某个值(如500ms),就当做用户输入完成,然后开始搜索,具体使用哪种方案要看业务需求。
    2. 页面resize事件,常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染(这种情形一般是使用防抖,因为只需要判断最后一次的变化情况)
  • 相关阅读:
    150个JS特效脚本
    .sql文件被加密恢复
    Alpha865qqz.id 加密数据库恢复
    最新incaseformat 病毒删除文件恢复
    Oracle MISSING00000文件故障恢复
    asm 磁盘分区丢失恢复----惜分飞
    oracle数据文件0kb恢复
    ORA-600 16703--oracle介质被注入恶意脚本
    GANDCRAB病毒oracle数据库恢复
    文件系统损坏,oracle数据库恢复
  • 原文地址:https://www.cnblogs.com/panic404/p/13499430.html
Copyright © 2011-2022 走看看