• JS 节流函数(throttle)与防抖函数(debounce)


    节流和防抖是什么意思

    • 节流:在一定时间内连续触发某事件,在这段时间段内只执行首次触发的那一次。
    • 防抖:在一定时间内连续触发某事件,在这段时间内只执行最后一次触发的那一次。

    手写节流函数(详见本仓库:throttle.js

    //方法一:利用闭包保存时间
    const throttle = function(fn,delay){
      let prev = Date.now()
      return  ()=> {
        let now = Date.now()
        if (now - prev >= delay) {
            fn()
            prev = Date.now()
        }  
      }
    }
    

    手写防抖函数(详见本仓库:debounce.js

    //方法一:利用闭包保存延时器
    const debounce = function(fn,delay){
      let timer = null
      return ()=> {
        clearTimeout(timer)
        timer = setTimeout(()=>fn(), delay)
      }
    }
    

    应用

    • 防抖应用:输入框 change ,延时响应输入。例如货币输入框自动加小数点
    • 节流应用:响应滚动事件。例如瀑布流无限滚动
  • 相关阅读:
    HTML5拖拽
    HTML5地理定位
    HTML5文件读取
    HTML5全屏
    HTML5网络状态
    可爱的小黄人
    HTML5新增特性
    前端表单标签
    前端(表格)
    前端列表
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/13401466.html
Copyright © 2020-2023  润新知