防抖是:用户多次点击后,在一定的时间内.点击的事件只执行一次.剩余的时间按照,最新的一次点击重新计算

下面是一步一步按照思路写的

function debounce(fu, time = 5000) {

    let timeout = null

    clearTimeout(timeout)

    timeout = setTimeout(() => {

        fu()

    }, time)

}

function sayHai() {

    console.log('hi')

}

debounce(sayHai)

debounce(sayHai)

debounce(sayHai)

问题1: 怎么计算剩余多少时间

不用计算

问题2: 如果用上边写的这种方式 ? 能达到效果吗 ?

达不到效果, 用上边的方式写的模拟三次点击的时候.是会执行三次的

function debounce(fu, time = 5000) {

    let timeout = null

    return function () {

        clearTimeout(timeout)

        timeout = setTimeout(() => {

            fu()

        }, time)

    }

}

function sayHai() {

    console.log('hi')

}

debounce(sayHai)

debounce(sayHai)

debounce(sayHai)

问题3: 使用上边的这种方式, 也不能达到效果.输出的结果什么都没有

function debounce(fu, time = 500) {

    let timeout = null

    return function () {

        clearTimeout(timeout)

        timeout = setTimeout(() => {

            fu.apply(this, arguments); //解决this 和event的问题

        }, time)

    }

}

function sayHai() {

    console.log('hi')

}

debounce(sayHai)

debounce(sayHai)

debounce(sayHai)

问题4: 使用这个貌似也不行可能当前的这个this, 指向就不对

用一个RN试试
下面是用RN写的例子.达到了想要的效果:
注意点: 1、怎么用最新的点击的开始计算时间 2、this指向(关键在第一个参数，为了确保上下文环境为当前的this，所以不能直接用fn。)

debounce=(fu, time = 500)=> {
        let timeout = null
        console.log(timeout)
        return function () {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
                fu.apply(this, arguments); //解决this 和event的问题
            }, time)
        }
}

sayHai() {
    console.log('hi')
}

<TouchableOpacity onPress={this.debounce(this.sayHai)}>
<Text style={{ color: '#000' }}>测试防抖</Text>
</TouchableOpacity>

答案地址

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率 ,他两的区别就是:一个是时间会按照新的点击重新计算.而节流是

某个固定的时间只执行一次. 实现方式差不多.多了一个以前是否点击过的标记位.直接贴代码

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在 
            开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));