javascript - 回调函数不会意外执行

Question

我有这个函数在文本区域的淡出动画完成后执行回调:

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 )。 log('内部回调');)

我错过了什么？

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]'

(实际算法 here 和 here 并由 fadeOut 和所有其他动画使用 here)

我们可以看到异步函数和生成器没有通过这个检查:

({}).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

要了解更多细节，请继续阅读:

---

有问题的更新日志是 here :

Update isFunction to handle unusual-@@toStringTag input

负责此更改的 jQuery PR 是 here :

Generators and async functions are still functions, and we can recognize them with typeof

最值得注意的是 this line :

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

已更改为(简化):

return typeof obj === "function"