每日源碼分析 - lodash(after.js)

本系列使用 lodash 4.17.4

前言

本文件無對引用其餘文件的引用

正文

/** * The opposite of `before`. This method creates a function that invokes * `func` once it's called `n` or more times. * * @since 0.1.0 * @category Function * @param {number} n The number of calls before `func` is invoked. * @param {Function} func The function to restrict. * @returns {Function} Returns the new restricted function. * @example * * const saves = ['profile', 'settings'] * const done = after(saves.length, () => console.log('done saving!')) * * forEach(saves, type => asyncSave({ 'type': type, 'complete': done })) * // => Logs 'done saving!' after the two async saves have completed. */
function after(n, func) {
  if (typeof func != 'function') {
    throw new TypeError('Expected a function')
  }
  return function(...args) {
    if (--n < 1) {
      return func.apply(this, args)
    }
  }
}

export default after
複製代碼

使用方式

// after函數的使用
var finished = () => {
  console.log('Holy sh*t I finished it')
}

var code = after(3, finished)
code() // ...
code() // ...
code() // 'Holy sh*t I finished it'
複製代碼

使用場景

我儘可能總結一下after函數實際的應用場景

1. 多個異步請求結束時觸發

正如註釋中寫到的同樣

const saves = ['profile', 'settings']
const done = after(saves.length, () => console.log('done saving!'))
forEach(saves, type => asyncSave({ 'type': type, 'complete': done }))
// 當兩個異步請求都完成以後會調用() => console.log('done saving!')
複製代碼

儘管我通常會選擇Promise.all

2. ...

好吧我不得不認可我確實想不到其餘使用的地方了，請實際在項目中有用過或者有想法的人在評論區告知我，感激涕零。

源碼分析

其實本函數代碼很少，但能夠從中窺視一眼閉包的內涵

不過因爲閉包要講篇幅實在太長了，我推薦一篇我認爲閉包講得很清楚的博客,原本做者在簡書的，不過好像以前由於簡書的某些事件而離開簡書了，做者最近在找新平臺，暫時放一個轉載的連接。

前端基礎進階（四）：詳細圖解做用域鏈與閉包

本文章來源於午安煎餅計劃Web組 - 梁王