发表新帖
发表新帖

How to clear interval and set it again?

前端 未结
关注
5 1130
离开以前
离开以前 2020-12-30 03:15

This is what i am trying to accomplish: when the last slide is reached fadeOut last slide and then fadeIn first slide, and then clearInterval (everything works with th

相关标签:
5条回答
  • 予麋鹿
    2020-12-30 03:48

    Just Example

    var myVar 
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}
function myStartFunction() {
    myVar = setInterval(myTimer, 1000);
}
myStartFunction();
    <p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<button onclick="myStartFunction()">Start time</button>

    0 讨论(0)
  • 北荒
    2020-12-30 03:51

    Solution for timer which counts 15 sec then goes to main page, if there is click on screen resets timer to the start. It may be useful to someone. (x is counter for touch events) :

      var productInterval = null;
  var counterForGoToMainPage = 15;

  function startTimer(){
    counterForGoToMainPage--;

    if(counterForGoToMainPage == 0){
      clearInterval(productInterval);
      counterForGoToMainPage = 15;
      window.location.href = "/";
      }
  }

  function countTouches(event) {
  var x = event.touches.length;

    if(x == 1) { 
      clearInterval(productInterval);
      counterForGoToMainPage = 15;
      productInterval = setInterval(function(){
         startTimer();
      },1000);
    }
  }
    0 讨论(0)
  • 余生分开走
    2020-12-30 03:54

    Here is utility object that takes a callback and interval which you can use to start and stop an interval.

       //simple utility object to start and stop an interval       
    var IntervalUtil = function(functionCall, interval){


        var intervalObj = 0,
            INTERVAL    = interval;

        var callback = functionCall;

        function startTimer(){
            console.log('start timer', intervalObj)
            if(intervalObj === 0){
                intervalObj = setInterval(callback, INTERVAL)
            }
        }   

        function stopTimer(){
            clearInterval(intervalObj);
            intervalObj = 0;
            console.log('timer stopped', intervalObj);
        }

        return {
            startTimer : startTimer,
            stopTimer  : stopTimer
        }

    };

    *You would use it like so *

    <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="author" content=""/>

    <title>Timer : setInterval()</title> 


    <style type="text/css">


    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        color:#000;
        line-height:1.3em;
        font: inherit;
        vertical-align: middle;
        font-family:arial;
        font-size:12px;
        outline:none;
    }

    a{
        outline:none;
        text-decoration:none;
        color:#145486;
    }
    a span{
        color:#145486;
    }

    h1{
        font-weight:normal;
        font-size:32px;
    }

    body{
        background:#efefef;
        text-align:center;
    }
    .content{
        width:400px;
        padding:20px;
        margin:10px auto;
        background:#fff;
        border:solid 1px #ebebeb;
        text-align:left;
    }

    #toggleTimer{
        color:#fff;
        font-size:10px;
        padding:2px 7px;
        display:inline-block;
        background:#357cb7;
        border:solid 1px #0c8af4;
    }

    #toggleTimer.running{
        background:#f14621;
        border:solid 1px #ff4c00;
    }

    #output{
        padding:7px;
        font-size:10px;
        border:dashed 1px #ebebeb;
        background:#f8f8f8;
        margin-left:10px;
        display:inline-block;
    }
    em{
        font-weight:bold;
    }

    </style>

</head>
<body>


<div class="content">

    <h1>Set Interval Code</h1>

    <a href="javascript:" id="toggleTimer" class="">Start Timer</a>

    <span id="output"></span>

    <br class="clear"/>

</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script type="text/javascript">

    $(document).ready(function(){
        var demo = new Demo();
    });


    var Demo = function(){

        var self = this;

        var START_TEXT = "Start Timer",
            STOP_TEXT  = "Stop Timer";

        var $toggle = $('#toggleTimer'),
            $output = $('#output');

        var count = 0;

        var intervalUtil;

        function init(){
            intervalUtil = new IntervalUtil(printMessage, 1000);
            setClickHandler();
            return self;
        }   

        function setClickHandler(){
            $toggle.click(toggleTimer)
        }

        function toggleTimer(){

            $toggle.toggleClass('running');

            if($toggle.hasClass('running')){
                $toggle.text(STOP_TEXT);
                intervalUtil.startTimer();
            }else{
                $toggle.text(START_TEXT);
                intervalUtil.stopTimer();
            }
        }

        function printMessage(){        
            $output.html("printMessage called <em>" + (count++) + "</em> times");
        }

        return init();

    }


    //simple utility object to start and stop an interval       
    var IntervalUtil = function(functionCall, interval){


        var intervalObj = 0,
            INTERVAL    = interval;

        var callback = functionCall;

        function startTimer(){
            console.log('start timer', intervalObj)
            if(intervalObj === 0){
                intervalObj = setInterval(callback, INTERVAL)
            }
        }   

        function stopTimer(){
            clearInterval(intervalObj);
            intervalObj = 0;
            console.log('timer stopped', intervalObj);
        }

        return {
            startTimer : startTimer,
            stopTimer  : stopTimer
        }

    };  

</script>


</body>
</html>
    0 讨论(0)
  • 广开言路
    2020-12-30 04:01

    Wrap setInterval in a function, for example:

    const startTimer = (timer) => {
    let seconds = 10
    timer = setInterval(() => {
        console.log(seconds)
        seconds--
        if(seconds === 0) {
            console.log("Time's up")
            clearInterval(timer)
        }
    }, 1000)
}

    and call it wherever you want:

    startTimer()

    0 讨论(0)
  • 长发绾君心
    2020-12-30 04:06

    After clear an interval you need to start it again with setInterval().

    It would be better to make function for your setInterval()

    var intervalID = null;

function intervalManager(flag, animate, time) {
   if(flag)
     intervalID =  setInterval(animate, time);
   else
     clearInterval(intervalID);
}

    Here flag is a boolean variable with value true/ false. true will execute setInterval() and false will clearInterval();

    Now you can use above function as you need.

    For example:

    intervalManager(true, animate, 300);  // for setInterval

intervalManager(false);  // for clearInterval
    0 讨论(0)
 看不清?
提交回复
热议问题