同步与异步

同步与异步： 

    <script>
        /*
         *  浏览器端的运行环境是单线程
         *  Js引擎，渲染引擎
         *  读取代码时按照从上往下的顺序执行
         *
         *  任务的执行分两种：同步任务和异步任务
         *
         *  同步任务： 任务的排列顺序与执行顺序一一对应的，只有上一个任务执行完毕，才会执行下一个任务
         *  异步任务：任务的排列顺序与执行顺序不相关的，任务执行完时，会优先执行附带的回调函数，
         *
         *   举例，同步任务中，浏览器端向服务器端发送请求，只能等待服务器将数据返回到浏览器端时，浏览器才可以继续执行其他操作，否则就一直等待请求数据中....
         *
         *   异步的好处：将耗时长或者阻塞的任务封装到回调函数中，当条件满足时执行回调函数，避免遇到阻塞或者出现消耗时间
         *
         *
         *
         *   JS中有异步的现象：
         *   1. AJAX (请求数据并接收数据)
         *   2. setTimeout, setInterval
         *   3. img, script的src属性
         *   4. css动画/animation
         *   5. dom事件  是特殊的函数，被称为事件监听函数
         *
         *
         *   异步的解决方案(如何将耗时长的同步代码转换成异步)
         *   1. 回调函数 callback (jquery的方法) 比如：$().animate({css样式}, time, callback) 当动画执行完毕后执行callback
         *   2. 事件监听机制  div.onclick = function(){} ,
         *           addEventListener(eventName, function(){}, false) 冒泡 true(捕获)
         *   3. es6提出的promise，
         *   4. es6提出的async/await
         *
         *
         *   回调函数的定义：
         *   函数A作为参数传递到函数B中，当满足特定条件时，在函数B内部调用函数A，函数A被称为回调函数， 如果函数A没有名称，则被称为匿名回调函数
         *
         * */

        console.log('a');
        document.querySelector('div').onclick = function () {
            console.log('e');
        }
        console.log('b');

        setTimeout(function () {
            console.log('c')
        })
        console.log('d');

        // 普通函数
        function show() {

        }

        UserModel.findOne({
            username
        }).exec(function (err, data) {
            if (err) {
                console.log('获取数据失败')
            } else {
                console.log(data);
            }
        })

        // 封装成面向对象的方法
        var obj = {
            getUserByName: function (username, callback) {
                UserModel.findOne({
                    username
                }).exec(function (err, data) {
                    if (err) {
                        //                    console.log('获取数据失败')
                        callback(err);
                    } else {
                        //                    console.log(data);
                        callback(null, data);
                    }
                    //                callback(err, data)
                })
            }
        }

        obj.getUserByName('张三', function (err, data) {
            // 输出用户信息
            if (err) {
                return console.log('错误')
            }
            // 输出错误信息
            console.log(data);
        })
    </script>