回調函數不會意外執行

Question

我有這個函數在 textarea 的淡出動畫完成后執行回調：

function inputReset() {
  return new Promise((resolve) => {
    if (lastExtend === true) {
      return resolve();
    };
    console.log('inside inputReset');
    const textarea = $("textarea").first();
    textarea.fadeOut(1500, "swing", async() => {
      console.log('inside callback');
      await textareaAnimeEnded(textarea);
      console.log('after await textareaAnimeEnded(textarea)');
      return resolve();
    });
  });

  function textareaAnimeEnded(textarea) {
    console.log('inside textareaAnimeEnded');
    inputClear();
    textarea.fadeIn(0);
    Dots.show();
    return new Promise(resolve => setTimeout(() => resolve(), 500));
  }
}

但出乎意料的是，我只看到了console.log('inside inputReset'); 盡管出現了淡出動畫，但我從未到達回調函數（我們從未到達console.log('inside callback'); ）

我缺少什么？

Answer 1

這里的混淆是由於 jQuery 版本不匹配。 JQuery 的isFunction檢查在 3.3.0 版本中更新以接受異步函數和生成器。

fadeOut和其他動畫函數檢查回調參數的類型。 如果它不是“函數”（根據 jQuery 的定義），則 jQuery 假定沒有傳遞回調。

因此傳遞給fadeOut的回調必須滿足jQuery 的函數定義。 而且，不幸的是，在 v3.3.0 之前，該定義不包括異步函數或生成器。

jQuery 在 v3.3.0 之前所做的檢查基本上是：

({}).toString.call(maybeFunction) === '[object Function]'

（此處和此處的實際算法以及在這里被fadeOut和所有其他動畫使用）

我們可以看到異步函數和生成器沒有通過這個檢查：

({}).toString.call(() => {}) // '[object Function]'
({}).toString.call(async () => {}) // '[object AsyncFunction]'
({}).toString.call(function*() {}) // '[object GeneratorFunction]'

但是，隨着 v3.3.0 中添加的新檢查：

typeof maybeFunction === 'function'

所有這些都通過：

typeof (() => {}) // 'function'
typeof (async () => {}) // 'function'
typeof function*() {} // 'function'

這就是為什么在版本 < 3.3.0 中您會看到動畫正常工作，但沒有調用異步回調函數。 JQuery 不會將其識別為函數。 實際上，如果省略easing參數，jQuery 會嘗試將傳遞的異步回調函數設置為動畫的緩動，這會破壞 jQuery：

textarea.fadeOut(2000, async () => {})
// jquery.js:6515 Uncaught (in promise) TypeError: jQuery.easing[this.easing] is not a function

有關更多詳細信息，請繼續閱讀：

---

有問題的變更日志在這里：

更新 isFunction 以處理異常-@@toStringTag 輸入

負責此更改的 jQuery PR在這里：

生成器和異步函數仍然是函數，我們可以通過 typeof 識別它們

最值得注意的是這一行：

return jQuery.type( obj ) === "function"

改為（簡化）：

return typeof obj === "function"