This article mainly introduces the asynchronous Script Loading Method of javascript with callback functions, and analyzes in detail the definition and usage skills of javascript callback functions for asynchronous loading in the form of examples, for more information about how to load javascript asynchronous scripts with callback functions, see the following example. Share it with you for your reference. The specific implementation method is as follows:
var Loader = function () { }Loader.prototype = { require: function (scripts, callback) { this.loadCount = 0; this.totalRequired = scripts.length; this.callback = callback; for (var i = 0; i < scripts.length; i++) { this.writeScript(scripts[i]); } }, loaded: function (evt) { this.loadCount++; if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call(); }, writeScript: function (src) { var self = this; var s = document.createElement('script'); s.type = "text/javascript"; s.async = true; s.src = src; s.addEventListener('load', function (e) { self.loaded(e); }, false); var head = document.getElementsByTagName('head')[0]; head.appendChild(s); }}
Usage demonstration
var l = new Loader();l.require([ "example-script-1.js?1.1.15", "example-script-2.js?1.1.15"], function() { // Callback console.log('All Scripts Loaded'); });
I hope this article will help you design javascript programs.