zoukankan      html  css  js  c++  java
  • 定时器,回调

    function test(){
        console.log(11);
    }
    window.setInterval(test,1000);//传的是函数,不是test()
    var id = setInterval(function(){//会开启倒计时的
            console.log(11);
        }, 1000);
    

    自己写的 完整的

    function countDown(div, callback, finishCallback){
        $.each(div, function(index,item){
            var timer = null;//就是利用闭包保留住这个timer
            var seconds = $(this).attr("data-seconds");
            var doWork = function(item){
                if(seconds > 0){
                    seconds--;
                    callback(seconds,item);
                }else{
                    window.clearInterval(timer);
                    finishCallback(item);
                }
            }
            timer = window.setInterval(function(){
                doWork(item)
            }, 1000);
        });
    }
    countDown($(".outer"), function(seconds, item){
        $(item).html(seconds);
    }, function(item){
        $(item).html("倒计时结束");
    });

    用的是这种,尽量避免使用$.fn,因为很可能被覆盖。还是用module.exports吧。

    module.exports = function(arr, stepCallback, endCallback){
    //实现
    }

    function main(callback, finishCallback){
            $(this).each(function(index, item){
                var timer = null;
                var seconds = $(this).attr("data-seconds");
                var doWork = function(){
                    if(seconds > 0){
                        seconds--;
                        callback(seconds,item);//这是实参,callback实际上在这里运行
                    }else{
                        window.clearInterval(timer);
                        if(finishCallback) finishCallback(item);
                    }
                }
                timer = window.setInterval(doWork, 1000);
            })
        }
        $.fn.countDown = main;
        $(".outer").countDown(function(seconds, item){//这其实是形参
            $(item).html(seconds);
        },function(item){
            $(item).html("倒计时结束");
        });

    大牛精简版

    $(".outer").each(function () {
        var el = this
        var s = Number($(el).attr("data-seconds")) || 0
        //attr得到的是字符串,先转换成数字,避免NaN。给默认为0
        var id = setInterval(function () {//闭包
            $(el).html(s--)
            if (s === 0) {
                $(el).html("倒时计结束!")
                clearInterval(id)
            }
    
        }, 1000)
    })

     countDown单个执行版

    function countDown(){
        var timer = null;
        var seconds = $(this).attr("data-seconds");
        var self = this;
        var doWork = function(){
            if(seconds > 0){
                seconds--;
                $(this).html(seconds);
            }else{
                window.clearInterval(timer);
            }
        };
        timer = window.setInterval(function() {
            console.log(this);//window
            doWork.call(self);//改变作用域
        }, 1000);
    };
    $(".outer").each(function(index, item){
        countDown.call(this);
    })

    实际应用版

    (function(){
        var countdown = function(item, config){
            var seconds = parseInt($(item).attr(config.attribute));
            var timer = null;
            var doWork = function(){
                if(seconds >= 0){
                    if(typeof(config.callback) == "function"){
                        var data = {
                            total : seconds ,
                            second : Math.floor(seconds % 60) ,
                            minute : Math.floor((seconds / 60) % 60) ,
                            hour : Math.floor((seconds / 3600) % 24) ,
                            day : Math.floor(seconds / 86400)
                        };
                        config.callback.call(item, seconds, data, item);
                    }
                    seconds --;
                }else{
                    window.clearInterval(timer);
                    if(typeof(config.finishCallback) =="function"){
                        config.finishCallback.call(item);
                    }
                }
            }
            timer = window.setInterval(doWork, 1000);
            doWork();
        };
        var main = function(){
            var args = arguments;
            var config = { attribute : 'data-seconds', callback : null, finishCallback: null};
            if(args.length == 1){
                if(typeof(args[0]) == "function") {
                    config.callback = args[0];
                }
                if(typeof(args[0]) == "object") $.extend(config, args[0]);
            }else{
                if(typeof(args[0]) == "function"){
                    config.callback = args[0];
                    config.finishCallback = args[1]||null;
                }else{
                    config.attribute = args[0];
                    config.callback = args[1];
                    config.finishCallback = args[2]||null;
                }
            }
            $(this).each(function(index, item){
                countdown.call(item, item, config);
            });
        };
        $.fn.countdown = main;
    })();
  • 相关阅读:
    事件基础 (事件对象 阻止事件冒泡)
    document
    linux 下使用shell命令iostat监控iowait是否超负载
    使用shell来监控linux的io
    linux下使用awk命令按时间段筛选日志
    gulp 压缩js
    cf776D Mahmoud and a Dictionary
    P1313 计算系数
    __builtin_popcount() 函数
    HDU 6386 Age of Moyu
  • 原文地址:https://www.cnblogs.com/darr/p/5076240.html
Copyright © 2011-2022 走看看