zoukankan      html  css  js  c++  java
  • 透过现象看本质:防抖函数和节流函数

    (一)防抖(debounce)

    1. 思想

    「抖」是振动的意思,振动是指一个状态改变的过程。「防抖」实际上防的是物体状态在短时间内发生快速变化。在 Web 前端开发领域,即是防止浏览器在短时间内多次计算元素属性,本质上,是为了节省浏览器计算资源。在与服务器交互场景中,也可以起到节省带宽,服务器压力的作用。

    「防抖函数」的核心原理是,延迟函数执行,若在延迟期间,函数被调用,则继续延迟直至无函数调用为止,其表现为函数仅被调用一次。状态只存在从 0 到 1,从初始值到结果值的变化,因此不存在频繁的抖动。

    假设一个人不断的接收命令采取行动,防抖思想则是让这个人在接收完所有命令前,不要采取任何行动,当命令结束一定时间后(确认没有新的命令),统一采取行动。

    2. 实现

    核心代码

    const debounce = (fn, delay) => {
        let timer = null
        return (...args) => {
             if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
               fn(...args)
            }, delay)
        }
    }
    

    3. 使用场景

    1. 输入框输入即时发送请求;
    2. 浏览器 resize 回调;
    3. 滚动条滚动回调;

    (二)节流(throttle)

    1. 思想

    「节」是节约的意思,而「流」在开发领域中即是计算,节流的核心目的与防抖相同:节省计算机计算资源。但是在思想上则不如防抖函数那么「激进」,只让函数执行一次。节流函数允许函数被频繁触发,但是触发频率不是由用户决定,而是由开发者限定触发时间间隔。

    同样假设一个人不断的接收命令采取行动,节流思想则是让这个人每过一段时间,行动一次,在两次行动之间的间隔内,不采取任何行动。

    2. 实现

    const throttle = (fn, delay) => {
        let execute = true
        return (...args) => {
            if (!execute) return 
            execute = false
            setTimeout(() => {
                fn(...args)
                execute = true
            }, delay)
        }
    }
    

    3. 使用场景

    1. mousemove 事件
    2. 按照滚动距离加载元素;
  • 相关阅读:
    css3圆角细节
    css3伪元素
    使用vscode在谷歌上运行代码
    SpringCloud-技术专区-Gateway优雅的处理Filter抛出的异常
    SpringCloud-技术专区-Gateway全局通用异常处理
    Mybatis-技术专区-插件开发指南
    消息中间件-技术专区-RabbitMQ基本介绍
    SpringBoot-技术专区-自定义TaskExecutor线程池
    MySQL-技术专区-Binlog和Redolog的介绍
    SpringBoot-技术专区-Redis同数据源动态切换db
  • 原文地址:https://www.cnblogs.com/libinfs/p/13967284.html
Copyright © 2011-2022 走看看