javascript - I have a question, is it because the external js file has not been downloaded and the ready function will not be executed?

I encountered a problem recently. The website quoted Google's map api, which I couldn't open locally. The js had to be referenced for a long time and was always in the pending state. But at this time, certain buttons were clicked, especially the click events of these buttons. In the ready function, there will be no effect. What's the solution?

<code>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=<?php echo $language; ?>"></script> 
   
 <script type="text/javascript"> 


  $(document).ready(function() {
    var lat = {lat: <?php echo $geocodes[0]; ?>, lng: <?php echo $geocodes[1]; ?>}; 
    var myOptions = {  
       zoom: 17,
       center: lat,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       disableDefaultUI: true,
       zoomControl: true,
    }; 
    var map = new google.maps.Map(document.getElementById("map"), myOptions);   
    var marker = new google.maps.Marker({
      map: map,
      // Define the place with a location, and a query string.
      place: {
        location: lat,
        query: `<?php echo $address; ?>`

      },
      // Attributions help users find your site again.
      attribution: {
        source: 'Google Maps JavaScript API',
        webUrl: 'https://developers.google.com/maps/'
      }
    });

    // Construct a new InfoWindow.
    var infoWindow = new google.maps.InfoWindow({
      content: `<?php echo $store; ?><br><?php echo $address; ?>`
    });
      infoWindow.open(map, marker);
    // Opens the InfoWindow when marker is clicked.
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    }); 

  });
    
 </script> </code>

Other ready functions

<code>$(document).ready(function() {
    // Language
    $('.language a').on('click', function(e) {
        e.preventDefault();

        $('.language input[name=\'code\']').attr('value', $(this).attr('href'));

        $('.language').submit();
    });
});</code>

Reply content:

I encountered a problem recently. The website quoted Google's map api, which I couldn't open locally. The js had to be referenced for a long time and was always in the pending state. But at this time, certain buttons were clicked, especially the click events of these buttons. In the ready function, there will be no effect. What's the solution?

<code>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=<?php echo $language; ?>"></script> 
   
 <script type="text/javascript"> 


  $(document).ready(function() {
    var lat = {lat: <?php echo $geocodes[0]; ?>, lng: <?php echo $geocodes[1]; ?>}; 
    var myOptions = {  
       zoom: 17,
       center: lat,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       disableDefaultUI: true,
       zoomControl: true,
    }; 
    var map = new google.maps.Map(document.getElementById("map"), myOptions);   
    var marker = new google.maps.Marker({
      map: map,
      // Define the place with a location, and a query string.
      place: {
        location: lat,
        query: `<?php echo $address; ?>`

      },
      // Attributions help users find your site again.
      attribution: {
        source: 'Google Maps JavaScript API',
        webUrl: 'https://developers.google.com/maps/'
      }
    });

    // Construct a new InfoWindow.
    var infoWindow = new google.maps.InfoWindow({
      content: `<?php echo $store; ?><br><?php echo $address; ?>`
    });
      infoWindow.open(map, marker);
    // Opens the InfoWindow when marker is clicked.
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    }); 

  });
    
 </script> </code>

Other ready functions

<code>$(document).ready(function() {
    // Language
    $('.language a').on('click', function(e) {
        e.preventDefault();

        $('.language input[name=\'code\']').attr('value', $(this).attr('href'));

        $('.language').submit();
    });
});</code>

<code><script>
var js = document.createElement('script');
js.src= 'js地址';
document.querySelector('body').appendChild(js);
</script></code>

This way it won’t be blocked

Your ready function depends on Google's API, you can only wait until the API is loaded; if it is too slow, download the Google API file and put it in the static resources of your website.