简单理解回调函数

回调函数的简单理解

概述

1. 简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
2. setTimeout() 这个调用函数我们也称为回调函数 callback 。普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
3. 以前的 element.onclick = function(){} 或者element.addEventListener(“click”, fn); 里面的 函数也是回调函数。

使用

• 点击使用回调函数，把函数当作一个参数传进来。

   btn.addEventListener("click", fn)
       function fn() {
            console.log("我是回调函数");
         }
       // 定时器使用回调函数，3秒后执行
        setTimeout(fn, 3000);

• 调用回调函数 （先执行本身函数 再调用执行回调函数）

      function fn(a, b, callback) {
            alert(a + b);//属于本身函数自带
            setTimeout(function() {
                // 3秒后如果有回调函数就调用回调函数
                if (callback) {
                    callback();
                }
            }, 3000);
        };
        btn.addEventListener("click", function() {
            fn(1, 2, function() {
                console.log("我是回调函数");
            })
        })

案例

倒计时

        var hour = document.querySelector(".hour");
        var minute = document.querySelector(".minute");
        var second = document.querySelector(".second");
        var after = +new Date('2021-7-30 18:00:00');//输入的时间
        function djs() {
            var now = +new Date();//当前时间
            var num = (after - now) / 1000;//秒
            //var year = parseInt(num / 60 / 60 / 24);//天
            // year = year < 10 ? year = "0" + year : year;//00
            var month = parseInt(num / 60 / 60 % 24);//时
            hour.innerHTML = month;
            month = month < 10 ? month = "0" + month : month;
            var day = parseInt(num / 60 % 60);//分
            day = day < 10 ? day = "0" + day : day;
            minute.innerHTML = day;
            var minutes = parseInt(num % 60);//秒
            minutes = minutes < 10 ? minutes = "0" + minutes : minutes;
            second.innerHTML = minutes;
        }
        djs(); //首先调用倒计时函数 防止出现一开始加载页面
        setInterval(djs, 1000); //调用回调函数djs