preface

What is an inert function? An lazy function means that the branch of the function is executed only when the function is called for the first time. During the first call, the function is overwritten with another function that is properly executed, so that any calls to the original function do not have to go through the branch of execution.

The essence of a lazy function is function rewriting, and by lazy loading, the branch of a function’s execution occurs only once. So when does the function rewrite? Since one function can return another, you can override the old function with a new function.

<script>
        function a() {
            console.log('a');
            a = function () {
                console.log('b');
            }
        }
        a(); //q
        a(); //b
    </script>
Copy the code

Console.log (‘a’) is executed the first time this function is called, printing out A, the global variable A is redefined and given a new function, and console.log(‘b’) is executed the next time it is called.

Useful: Because of the behavior differences between browsers, it is common to include a large number of if statements in functions to check browser features and resolve compatibility issues between browsers.

<script>
    function addEvent(type, element, fun) {
        if (element.addEventListener) {
            element.addEventListener(type, fun, false);
        }
        else if (element.attachEvent) {
            element.attachEvent('on' + type, fun);
        }
        else {
           element['on'+ type] = fun; }}</script>
Copy the code

Each time the addEvent function is called, it checks for the capabilities supported by the browser, first to see if the addEventListener method is supported, then to see if the attachEvent method is supported, and if not, to add events using dom0-level methods.

This process is repeated every time the addEvent function is called. In fact, if the browser supports one of these methods, it will always support it, and there is no need to check the other branches. That is, the if statement doesn’t have to be executed every time, and the code can run faster.

Lazy functions can be implemented in two ways:

(1) Process the function when it is called. The first time a function is called, it is overwritten by another function that executes properly, so that any calls to the original function do not have to branch through the execution


<script>
        function addEvent(type, element, fun) {
            if (element.addEventListener) {
                addEvent = function (type, element, fun) {
                    element.addEventListener(type, fun, false); }}else if (element.attachEvent) {
                addEvent = function (type, element, fun) {
                    element.attachEvent('on'+ type, fun); }}else {
                addEvent = function (type, element, fun) {
                    element['on'+ type] = fun; }}return addEvent(type, element, fun);
        }
    </script>
Copy the code

In this addEvent(), each branch of the if statement assigns a value to the addEvent variable, effectively overwriting the original function. The last step is to call the new assignment. The next time addEvent() is called, the newly assigned function is called directly, eliminating the need to execute the if statement.

(2) When declaring a function, specify the appropriate function.

 <script>
        var addEvent = (function () {
            if (document.addEventListener) {
                return function (type, element, fun) {
                    element.addEventListener(type, fun, false); }}else if (document.attachEvent) {
                return function (type, element, fun) {
                    element.attachEvent('on'+ type, fun); }}else {
                return function (type, element, fun) {
                    element['on'+ type] = fun; }}}) ();</script>
Copy the code