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;
    })();
  • 相关阅读:
    FreeCommander 学习手册
    String详解, String和CharSequence区别, StringBuilder和StringBuffer的区别 (String系列之1)
    StringBuffer 详解 (String系列之3)
    StringBuilder 详解 (String系列之2)
    java io系列26之 RandomAccessFile
    java io系列25之 PrintWriter (字符打印输出流)
    java io系列24之 BufferedWriter(字符缓冲输出流)
    java io系列23之 BufferedReader(字符缓冲输入流)
    java io系列22之 FileReader和FileWriter
    java io系列21之 InputStreamReader和OutputStreamWriter
  • 原文地址:https://www.cnblogs.com/darr/p/5076240.html
Copyright © 2011-2022 走看看