New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JavaScript 函数节流和函数去抖应用场景辨析 #20

Open
hanzichi opened this Issue Oct 6, 2016 · 16 comments

Comments

Projects
None yet
@hanzichi
Owner

hanzichi commented Oct 6, 2016

概述

也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗)

言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函数去抖。这篇文章不会涉及具体的代码实现(关于代码实现请期待下文),会从零开始介绍函数节流和函数去抖的概念,辨析应用场景。为什么我对这两个方法情有独钟要花大篇幅去介绍?因为就是它们带我入了「underscore 源码解读」的坑(详见 一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考)。

函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。举个例子,实现一个原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路监听 mousemove 事件,在回调中获取元素当前位置,然后重置 dom 的位置(样式改变)。如果我们不加以控制,每移动一定像素而触发的回调数量是会非常惊人的,回调中又伴随着 DOM 操作,继而引发浏览器的重排与重绘,性能差的浏览器可能就会直接假死,这样的用户体验是非常糟糕的。我们需要做的是降低触发回调的频率,比如让它 500ms 触发一次,或者 200ms,甚至 100ms,这个阈值不能太大,太大了拖拽就会失真,也不能太小,太小了低版本浏览器可能就会假死,这样的解决方案就是函数节流,英文名字叫「throttle」。函数节流的核心是,让一个函数不要执行得太频繁,减少一些过快的调用来节流。

说完函数节流,再看它的好基友函数去抖(debounce)。思考这样一个场景,对于浏览器窗口,每做一次 resize 操作,发送一个请求,很显然,我们需要监听 resize 事件,但是和 mousemove 一样,每缩小(或者放大)一次浏览器,实际上会触发 N 多次的 resize 事件,用节流?节流只能保证定时触发,我们一次就好,这就要用去抖。简单的说,函数去抖就是对于一定时间段的连续的函数调用,只让其执行一次。

throttle 应用场景

函数节流有哪些应用场景?哪些时候我们需要间隔一定时间触发回调来控制函数调用频率?

  • DOM 元素的拖拽功能实现(mousemove)
  • 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
  • 计算鼠标移动的距离(mousemove)
  • Canvas 模拟画板功能(mousemove)
  • 搜索联想(keyup)
  • 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次 #21 (comment)

debounce 应用场景

函数去抖有哪些应用场景?哪些时候对于连续的事件响应我们只需要执行一次回调?

  • 每次 resize/scroll 触发统计事件
  • 文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)

小结

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发,而一个方法之所以会被频繁触发,大多数情况下是因为 DOM 事件的监听回调,而这也是函数节流以及去抖多数情况下的应用场景。至于函数节流和去抖方法的具体代码实现以及调用方式,下文我们再做分享。

@xdlrt

This comment has been minimized.

xdlrt commented Oct 6, 2016

wait for the next eassy.:)

@linonetwo

This comment has been minimized.

linonetwo commented Oct 7, 2016

现在具体实现是不是一般靠 RxJs 这类 Observable 呀

@bodyno

This comment has been minimized.

bodyno commented Oct 8, 2016

简单来说

一个是多久触发一次

一个是延迟多久触发

不知道这样是不是更容易理解一些

@hanzichi

This comment has been minimized.

Owner

hanzichi commented Oct 8, 2016

@bodyno

我觉得应该理解成 「一个是间隔时间段触发」,「一个是只触发一次」。

"延迟多久触发" 不大准确,可以第一次触发事件时立即触发

@hanzichi

This comment has been minimized.

Owner

hanzichi commented Oct 8, 2016

@linonetwo sorry,不大了解

@pod4g

This comment has been minimized.

pod4g commented Oct 8, 2016

@hanzichi 觉得子迟的理解更容易让人理解。就像一窝蜂的人去排队看演出,队伍很乱,看门的老大爷每隔1秒,让进一个人,这个叫throttle,如果来了这一窝蜂的人,老大爷一次演出只让进一个人,下次演出才让下一个人进,这个就叫debounce(如果用onresize类比,就是鼠标mousedown,然后疯狂缩放窗口,然后鼠标mouseup,这整个过程就是一次演出,这次演出只允许一个人看即只执行一次回调)。

@henryluki

This comment has been minimized.

henryluki commented Oct 8, 2016

我觉得“节流”和“去抖”应该结合在一起:间隔时间段内,只执行一次。
比如下面一段代码:

/**
 * 设置只执行一次的timer
 */
let timer = {};
const TS = 200;

function _clearTimer(name){
    if (timer[name]) {
        window.clearTimeout(timer[name])
        timer[name] = null
    }
}

export default function setTimer(name, fn, ts){
    _clearTimer(name)
    timer[name] = window.setTimeout(fn, ts || TS)
}

@TechQuery

This comment has been minimized.

TechQuery commented Dec 19, 2016

JS 函数节流、去抖一定要依赖定时器吗? TechQuery/iQuery.js@fd3a0a3

@linonetwo

This comment has been minimized.

@mqliutie

This comment has been minimized.

mqliutie commented Mar 11, 2017

这个时间段到底多少是最合适的?一般使用场景都是 滚动 或者 拖拽 吧? 我看一般都设置在300ms, 这个数值通过什么方法能算出来最少多少能的出来最佳性能么?

@wy1009

This comment has been minimized.

wy1009 commented Feb 15, 2018

对对对没有错,我刚开始的时候也困惑过,书上说的节流好像和我知道的防抖是一样的,那节流和防抖到底是什么区别……

@hsuna

This comment has been minimized.

hsuna commented May 11, 2018

就交互场景而已,可以这样举例子~
throttle像是按钮的冷却时间,防止用户频繁操作;
debounce像是搜索框的查询,等待用户完成操作再执行,避免打字期间就不断的查询。

@shileiyuan

This comment has been minimized.

shileiyuan commented Jul 9, 2018

节流: 一个函数要执行,要等待一定的时间间隔,如果在等待的时候又有一个函数要执行,那么上一个函数取消,且下一个函数要等待的时间间隔就是上一个函数剩下的时间。
防抖:一个函数要执行,要等待一定的时间间隔,如果在等待的时候又有一个函数要执行,那么上一个函数取消,且下一个函数重新计时。

@CharlyCheng

This comment has been minimized.

CharlyCheng commented Jul 24, 2018

15年房价跌的时候没入手,16年房价暴涨没入手,现在高的平缓期,还是没入手,已经无法入手!

@hanzichi

This comment has been minimized.

Owner

hanzichi commented Jul 24, 2018

@CharlyCheng 现在有钱也难入手,开始摇号了都。。

@wy1009

This comment has been minimized.

wy1009 commented Oct 15, 2018

15年房价跌的时候没入手,16年房价暴涨没入手,现在高的平缓期,还是没入手,已经无法入手!

现在感觉阴跌了,我是打算等有资格就入手……

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment