RequireJS报错：Uncaught TypeError: hi is not a function 问题咨询

错误原因 #

RequireJS的模块加载是异步执行的：

• 调用require(['say'], ...)后，浏览器会在后台异步加载say模块，只有当模块加载完成时，才会执行传入的回调函数，给变量hi赋值为实际的函数。
• 你在require调用之后立刻执行hi()，此时回调函数还没触发，hi仍然是初始的undefined，所以会抛出“hi不是函数”的错误。

解决方法 #

方法1：将函数调用放到回调内部（最直接） #

把hi()的执行逻辑移到require的回调函数里，确保只有当say模块加载完成、hi被赋值后才执行：

<script src="/js/require.js"  data-main="/js/config.js"  ></script>
<script>
    require(['say'], function(say){
        var hi = function() { say.hi(); }
        hi(); // 此时hi已被正确赋值
    }); 
</script>

方法2：用Promise封装实现延迟调用 #

如果需要在回调外部调用hi，可以用Promise封装模块加载过程，确保函数准备好后再执行：

<script src="/js/require.js"  data-main="/js/config.js"  ></script>
<script>
    const hiPromise = new Promise((resolve) => {
        require(['say'], function(say){
            const hi = function() { say.hi(); }
            resolve(hi);
        }); 
    });

    hiPromise.then(hi => hi());
</script>

方法3：使用RequireJS的require.ready() #

利用RequireJS提供的require.ready()方法，等待所有依赖模块加载完成后再执行代码：

<script src="/js/require.js"  data-main="/js/config.js"  ></script>
<script>
    var hi; 
    require(['say'], function(say){
        hi = function() { say.hi(); }
    }); 

    require.ready(function() {
        hi(); // 所有模块加载完成后执行
    });
</script>

内容的提问来源于stack exchange，提问作者ashrf glal