javascript - 关于 js 节流函数的使用问题

问题描述

问 题

http://jsfiddle.net/haichao/f...
http://jsfiddle.net/haichao/d...

第一个 demo 可以正常执行，第二个 demo 没有正常执行。
两个 demo 区别：

btn.onclick = throttle(function () {
      console.log(1)
}, 1000)

btn.onclick = function () {
    throttle(function () {
          console.log(1)
    }, 1000)
}

另外关于 throttle 函数的实现中，return 一个 function，这个 function 并没有执行，为什么仍然执行了 fn。
求解答。

解决方案

这里的关键在 throttle() 这个函数，我这里先把 throttle() 抄下来

function throttle(fn, wait) {
    var timer
    return function(...args) {
        if (!timer) {
            timer = setTimeout(() => {
                timer = null
            }, wait)
            return fn.apply(this, args)
        }
    }
}

这个函数的内部过程可以简化描述为

function throttle(fn) {
    return function() {
        fn();
    };
}

就是说，它返回一个函数，而且返回的这个函数在执行的时候会调用最外面传入的 fn。

第一个 demo 中，onclick 需要赋值一个函数，而 throttle() 返回的就是一个函数，所以 onclick 得到的是 function() { fn(); }，点击的时候会执行这个函数，而它会调用 fn()。

第二个 demo 中，onclick 得到的是 functioin() { throttle(); }，点击的时候会执行 throttle()，而 throttle() 所做的事情只是返回了 function() { fn(); }，并没有调用它，所以在你看来它没有正常执行。

这篇关于javascript - 关于 js 节流函数的使用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！