JavaScript中的全局变量无法按预期工作

Question

这是代码，我在函数内部有一个菜单全局变量。 我想在它之外使用它，但是随后出现“未定义的引用错误...·”这是我仅有的javascript代码，因此不会干扰其他变量或函数。

提前致谢。

$(function() {
  menu =  $('nav#menu').mmenu(
    {   
      navbars: [
        {
          position: "top",  
          height    : 1,
          content : [ 
            '<a href="#/" class="fa fa-phone"></a>',
            '<img src="imagenes/wheel32.png" /><p class="navbartxt">bicimap.uy</p>',                    
          ]
        },
        {
          position: "bottom",
          content: [
            '<a class="fa fa-envelope"></a>',
            '<a class="fa fa-twitter"></a>',
            '<a class="fa fa-facebook"></a>'
          ]
        }
      ],                    
      extensions: ["multiline"],    
      onClick: {
        close: false
      },
      navbar:{
        title: "Inicio"                     
      },
      offCanvas: {           
        zposition : "next"
      }
    });         
  });

我需要将其放在函数中以使其正常工作

var API = $("#menu").data( "mmenu" );

menu.on( 'click', 'a[class^="fa fa-twitter"]', function() {  
  $('#twitter').show();                 
  var API = $("#menu").data( "mmenu" );
  API.close();      

  return false;
});

Answer 1

我在这里缺少上下文（我假设还有更多我们看不到的东西？）

但是您可能正在运行$(…)内部的代码（在dom就绪）之前执行后一个代码段menu.on( 'click'… ）；因此menu将是未定义的。

如果您只是入门，那么值得研究浏览器的开发人员工具并了解断点和日志记录。

您需要确保仅在设置menu后才使用menu ，这可能会延迟所有准备就绪的调用。

---

执行命令

1. $被调用，并且函数作为第一个也是唯一的参数提供。 该函数本身不被调用。

2. API由$("#menu" ）的结果定义。取决于是否在此文件的html文件中添加了该位置，可能无法找到。

3. data方法是根据该方法的结果调用的

4. 您尝试调用on的menu ，这仍然是不确定的

5. 稍后，您传递给$的函数被调用，菜单最终被定义，直到后来才有用

Answer 2

如果您的闭包/匿名函数是异步发生的，则可能在计算其余代码时尚未完成工作。 我需要更多的上下文来确定这一点。

Answer 3

这是我找到的解决方案，可能不是最好的解决方案，因为它可能会带来问题。 由于某些原因，就绪功能无法如上所示工作，可能是预期会有一些资产。

menu = null;
$(function() {

            menu =  $('nav#menu').mmenu(

            {   
                navbars     : [{
                    position: "top",    
                    height  : 1,
                    content : [ 

                        '<img src="imagenes/wheel32.png" /><p class="navbartxt">bicimap.uy</p>',                

                    ]
                },
                {
                    position: "bottom",
                    content: [
                        '<a class="fa fa-envelope"></a>',
                        '<a class="fa fa-twitter"></a>',
                        '<a class="fa fa-facebook"></a>'
                    ]
                }
                ],                  
                extensions: ["multiline"],  
                 onClick: {
                    close: false
                 },
                navbar:{
                    title: "Inicio"                     
                },
                offCanvas: {
                  zposition : "next"
                }

        });

    });


$( window ).load(function() {

  var API = $("#menu").data( "mmenu" );

        menu.on( 'click', 'a[class^="fa fa-twitter"]', function() {  
                        $('#twitter').show();

                          var API = $("#menu").data( "mmenu" );
                          API.close();      

                        return false;
                    }
         );

});