首頁(yè) 猿問關(guān)于 js 節(jié)流函數(shù)的使用問題

關(guān)于 js 節(jié)流函數(shù)的使用問題

JavaScript

絕地?zé)o雙 2018-10-19 15:14:10

http://jsfiddle.net/haichao/f...http://jsfiddle.net/haichao/d...第一個(gè) demo 可以正常執(zhí)行，第二個(gè) demo 沒有正常執(zhí)行。兩個(gè) demo 區(qū)別：btn.onclick = throttle(function () { console.log(1) }, 1000)btn.onclick = function () { throttle(function () { console.log(1) }, 1000) }另外關(guān)于 throttle 函數(shù)的實(shí)現(xiàn)中，return 一個(gè) function，這個(gè) function 并沒有執(zhí)行，為什么仍然執(zhí)行了 fn。求解答。

查看完整描述

1 回答

元芳怎么了

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊

這里的關(guān)鍵在 throttle() 這個(gè)函數(shù)，我這里先把 throttle() 抄下來

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

這個(gè)函數(shù)的內(nèi)部過程可以簡(jiǎn)化描述為

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

就是說，它返回一個(gè)函數(shù)，而且返回的這個(gè)函數(shù)在執(zhí)行的時(shí)候會(huì)調(diào)用最外面?zhèn)魅氲?nbsp;fn。

第一個(gè) demo 中，onclick 需要賦值一個(gè)函數(shù)，而 throttle() 返回的就是一個(gè)函數(shù)，所以 onclick 得到的是 function() { fn(); }，點(diǎn)擊的時(shí)候會(huì)執(zhí)行這個(gè)函數(shù)，而它會(huì)調(diào)用 fn()。

第二個(gè) demo 中，onclick 得到的是 functioin() { throttle(); }，點(diǎn)擊的時(shí)候會(huì)執(zhí)行 throttle()，而 throttle()所做的事情只是返回了 function() { fn(); }，并沒有調(diào)用它，所以在你看來它沒有正常執(zhí)行。