JavaScript 异步操作优化: 使用 Promise 实现 afterHead 函数

function ce(name, time) {\n setTimeout(() => {\n document.querySelector("body").append(document.createElement(name))\n console.log(1);\n }, time);\n}\n\n\nce("div", 3000)\n\nfunction afterHead(callbackfn) {\n return new Promise((resolve, reject) => {\n try {\n const head = document.getElementsByTagName("div");\n if (head && head.length) {\n resolve();\n }\n } catch (error) {\n reject(error);\n }\n }).then(callbackfn);\n}\n\nafterHead(() => {\n ce("div", 3000);\n});\n\n这个案例可能还不行是因为在afterHead函数中没有调用resolve方法来表示异步操作完成。应该在if条件成立时调用_resolve方法。同时，callbackfn应该作为一个函数调用，而不是作为一个参数传递给callbackfn。修改后的代码如下：\n\njavascript\nfunction ce(name, time) {\n setTimeout(() => {\n document.querySelector("body").append(document.createElement(name))\n console.log(1);\n }, time);\n}\n\nfunction afterHead(callbackfn) {\n return new Promise((resolve, reject) => {\n try {\n const head = document.getElementsByTagName("div");\n if (head && head.length) {\n resolve();\n }\n } catch (error) {\n reject(error);\n }\n }).then(callbackfn);\n}\n\nafterHead(() => {\n ce("div", 3000);\n});\n\n\n这样修改之后，当div元素存在时，会等待异步操作完成后再执行ce函数。