回调函数(一)

;(function(win, doc){

        // 返回所有的元素节点
        var findNodes = function(){
            var eles = doc.body.getElementsByTagName("*");

            var i = eles.length,
                nodes = [],
                found;

            while(i){
                i -= 1;

                found = eles[i];
                if(found.nodeType == 1){
                    nodes.push(found);
                }
            }
            return nodes;
        };

        // 隐藏所有的
        var hide = function(nodes){
            var i = 0, max = nodes.length;
            for(; i < max; i++){
                nodes[i].style.display = 'none';
            }
        };

        hide(findNodes());// 遍历两次,这种实现是低效的

    })(window, document)

上面将findNodes()的返回结果作为回调,会循环两次,效率比较低。

下面进行改进:

// 重构findNodes() 以接受一个回调函数
        var findNodes = function(callback){
            var eles = doc.body.getElementsByTagName("*");
            var i = eles.length,
                nodes = [],
                found;

            // 检查回调函数是否为可调用的
            if(typeof callback !== "function"){
                callback = false;
            }

            while(i){
                i --;
                // 复杂逻辑
                
                if(eles[i].nodeType == 1){
                    found = eles[i];
                }

                // 现在运行回调函数
                if(callback){
                    callback(found);
                }

                nodes.push(found);
            }
            return nodes;
        };

        // 回调函数
        var hide = function(node){
            node.style.display = 'none';
        };

        // 找到指定节点, 并在后续执行中将其隐藏起来
        findNodes(hide);
        // findNodes 唯一执行的是检查是否提供了回调函数。并且存在的话就执行。现在hide不需要遍历所有节点了

        // 两秒以后再次显示 
        setTimeout(function(){
            findNodes(function(node){
                node.style.display = "block";
            });
        },2000);

1. 检查回调函数是否存在,存在则执行

2. 回调函数可以是一个已有的函数,或者也可以是一个匿名函数,可以在调用主函数时创建它。如上面的两秒后再次显示节点。

原文地址:https://www.cnblogs.com/chuyu/p/3457282.html