throttle-debounce

函数节流和函数防抖

Throttle api 说明

节流，让一个任务按照设定的时间间隔执行。

• Throttle:

  • constructor(task: ?Function=(()=>{}), time: ?number=0)：构造函数

    • 参数：
      • task：函数，要执行的任务
      • time：时间，任务的执行时间间隔
    • 返回值：Throttle

  • setTask(task: Function): Throttle：设置任务，为某个Throttle实例设置任务，将会覆盖构造函数中的任务

    • 参数：
      • task：函数，要执行的任务
    • 返回值：Throttle

  • setTime(time: number): Throttle：设置时间间隔，为某个Throttle实例设置时间间隔，将会覆盖构造函数中的时间间隔

    • 参数：
      • time：时间，任务的执行时间间隔
    • 返回值：Throttle

  • run(task: ?Function=(this.task), time: ?number=this.time): void：执行某个Thottle

    • 参数：
      • task：函数，要执行的任务，将会覆盖构造函数、setTask中的任务
      • time：时间，任务的执行时间间隔，将会覆盖构造函数、setTime中的时间间隔
    • 返回值：void

Throttle 栗子

设置一个定时器，每100ms执行一次throttle.run，throttle设置的时间间隔是1000ms，所以任务每1000ms才会执行一次，但是期间run调用却有10次，达到了节流的目的

    let i = 0
    let throttle = new Throttle()
    throttle
        .setTime(1000)
        .setTask(() => {
            console.log(i)    
        })

    setInterval(() => {
        i = i + 100
        throttle.run()
    }, 100)
    // console
    // interval: t/100ms
    // throttle task: t/1000ms
    // 1000 2000 3000 4000 5000 ....

Debounce api 说明

防抖，一个任务在时间间隔内不再触发才执行。

• Debounce:

  • constructor(task: ?Function=(()=>{}), time: ?number=0)：构造函数

    • 参数：
      • task：函数，要执行的任务
      • time：时间，触发时间间隔
    • 返回值：Debounce

  • setTask(task: Function): Debounce：设置任务，为某个Debounce实例设置任务，将会覆盖构造函数中的任务

    • 参数：
      • task：函数，要执行的任务
    • 返回值：Debounce

  • setTime(time: number): Debounce：设置触发时间间隔，为某个Debounce实例设置时间间隔，将会覆盖构造函数中的触发时间间隔

    • 参数：
      • time：时间，任务的执行触发时间间隔
    • 返回值：Debounce

  • run(task: ?Function=(this.task), time: ?number=this.time): void：触发某个Debounce

    • 参数：
      • task：函数，要执行的任务，将会覆盖构造函数、setTask中的任务
      • time：时间，任务的执行触发时间间隔，将会覆盖构造函数、setTime中的触发时间间隔
    • 返回值：void

Debounce 栗子

定时器每100ms触发一次run，任务设定触发时间间隔是1000ms，所以定时器触发并不会导致任务执行，直到1000ms后定时器不再执行，再等1000ms，任务将执行，达到了防抖的目的。

        let i = 0
        let debounce = new Debounce()
        debounce
            .setTime(1000)
            .setTask(() => {
               console.log(i)
            })
        let interval = setInterval(() => {
            i = i + 100
            debounce.run()
            if (i === 1000) {
                clearInterval(interval)
            }
        }, 100)
    // console
    // interval: t/100ms
    // debounce task: t/1000ms
    // 1000