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

Global variable in javascript doesn't work as expected

本文关键字：工作 全局变量 JavaScript      更新时间：2023-09-26

这是代码，我在函数中有一个菜单全局变量。我想在它外面使用它，但随后我得到一个"未定义的引用错误...·这是我唯一的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;
});

我在这里缺少一些上下文（我假设还有更多我们没有看到的？

但是你可能正在执行后一个代码片段，menu.on( 'click'…在$(…)内部的代码运行之前（在 dom ready 上）;所以menu是未定义的。

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

您需要确保仅在设置menu后使用它，可能是通过延迟所有调用

以准备就绪。

执行顺序

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

  2. API由 $("#menu" ） 的结果定义，这可能尚未找到，也可能尚未找到，具体取决于您在 html 文件中添加此脚本的位置。

  3. 根据结果调用data方法

  4. 您尝试在 menu 上调用 on，这仍然未定义

  5. 过了一会儿，你传递给$的函数被调用，菜单最终被定义，到晚才有用

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

这是我找到的解决方案，也许它不是最好的，因为它可能会带来问题。由于某种原因，ready函数无法如上所示工作，可能是预期的某些资产。

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;
                    }
         );
});
相关文章：