V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
rodrick
V2EX  ›  JavaScript

关于节流函数

  •  
  •   rodrick · 2020-11-04 11:23:38 +08:00 · 1549 次点击
    这是一个创建于 1482 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前学的时候自己是这样写的

    function throttle(fn, wait) {
          let lastTime = 0
          let timer = null
          let nowTime = new Date().getTime();
    
          return function (...args) {
            if (nowTime - lastTime > wait) {
              fn.apply(this, args)
              lastTime = nowTime
            } else if (timer === null) {
              timer = setTimeout(() => {
                timer = null
                fn.apply(this, args)
              }, wait)
            }
          }
        }
    

    使用的时候发现如果定时器结束执行 fn.apply(this, args) 的话,那么这个 args 是当前时间减去 wait 的那个时间点的参数,并不是当前时间的参数
    在一些监控滑动位置等情况时[args 是当前位置信息]可能会导致执行 fn 的时候并不是使用的最准确的位置信息,那么怎么能拿到准确时间点的参数呢

    IsaacYoung
        1
    IsaacYoung  
       2020-11-04 11:27:25 +08:00
    你可能需要防抖
    shabbyin
        2
    shabbyin  
       2020-11-04 11:34:21 +08:00
    同楼上看法
    监控滑动位置为什么要用节流
    在滑动结束的时候提交一下位置数据不就可以了吗
    rodrick
        3
    rodrick  
    OP
       2020-11-04 11:43:49 +08:00
    @gyjames95
    @IsaacYoung
    是滑动的过程中去间隔性触发事件,不是滑动结束,这个只是举个例子,主要是这个参数不是准确时间点的参数的问题
    akaxiaok339
        4
    akaxiaok339  
       2020-11-04 12:02:20 +08:00   ❤️ 1
    ``` js
    function throttle(fn, wait) {
    let lastTime = 0
    let timer = null
    let nowTime = new Date().getTime();
    let params = null
    return function (...args) {
    params = args;
    if (nowTime - lastTime > wait) {
    fn.apply(this, args)
    lastTime = nowTime
    } else if (timer === null) {
    timer = setTimeout(() => {
    timer = null
    fn.apply(this, params)
    }, wait)
    }
    }
    }
    ```
    rodrick
        5
    rodrick  
    OP
       2020-11-04 13:03:37 +08:00
    @akaxiaok339 害...这么简单我居然没想到
    hurrytospring
        6
    hurrytospring  
       2020-11-04 16:11:04 +08:00
    tail leading 的概念?,看看 lodash 里面
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5976 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 02:14 · PVG 10:14 · LAX 18:14 · JFK 21:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.