信息资讯综合思念体

【前端】一个简单的倒计时函数

一个通用的倒计时函数:


;(function(root, factory) {
  if (typeof module === 'object' && module && module.exports) {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else {
    root.countdown = factory();
  }
}(this, function() {

  function countdown(seconds, onTicktock, onOver) {
    if (seconds <= 0) {
      console.error('[countdown Error] #1 argument must be greater than 0');
      return null;
    }

    if (typeof onTicktock != 'function') {
      console.error('[countdown Error] #2 argument must be a function');
      return null;
    }

    //倒计时剩余时间
    var restof = seconds;

    //计时器
    var timer = null;

    //计时器间隔
    var intervalTime = 1000;

    function ticktock () {
      if (restof > -1) { // 0 也会返回
        onTicktock(restof--, stop);
      } else {
        stop();
      }
    }

    function stop () {
      clearInterval(timer);
      timer = null;
      onOver && typeof onOver == 'function' && onOver();
    }

    //先执行一次
    ticktock();
    timer = setInterval(function () {
      ticktock();
    }, intervalTime);

    return stop;
  }

  return countdown;
}));


使用:

function t (sec, stop) {
    console.log('剩余:' + sec + '秒');
}

function s () {
    console.log('倒计时结束');
}
var callStop = countdown(5, t, s);

//console
VM366:2 剩余:5秒
VM366:2 剩余:4秒
VM366:2 剩余:3秒
VM366:2 剩余:2秒
VM366:2 剩余:1秒
VM366:2 剩余:0秒
VM366:6 倒计时结束


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«   2018年7月   »
1
2345678
9101112131415
16171819202122
23242526272829
3031
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接
  • RainbowSoft Studio Z-Blog
  • 订阅本站的 RSS 2.0 新闻聚合

Powered By Z-BlogPHP 1.5.1 Zero Theme By 爱墙纸

百度资讯综合思念体对有机生命接触用人形终端界面 那就是
晋ICP备15000230号