Wie lösche ich das Intervall und setze es erneut?

Lesezeit: 6 Minuten

Wie losche ich das Intervall und setze es erneut
Dejo Dekic

Folgendes versuche ich zu erreichen: Wenn die letzte Folie erreicht ist, wird die letzte Folie ausgeblendet und dann die erste Folie eingeblendet und dann das ClearInterval (alles funktioniert mit diesem Teil). Jetzt ist mein Problem, dass ich setInterval möchte aufs Neue wenn es nicht existiert, aber ich weiß nicht, wie ich es machen soll 🙁
Ich habe versucht, dies mit einer if-Anweisung zu lösen, aber dann funktioniert mein Skript überhaupt nicht!
Wie kann ich also mein Intervall neu starten? DANKE!!
Ohne Wenn eine Aussage wie diese funktioniert, funktioniert es gut:

if(!intervalID){
    intervalID = setInterval(animate,5000);
}    

Das habe ich bisher:

$(document).ready(function() {
  /*check if intervalID don't exists messes UP!!*/
  if (!intervalID) {
    intervalID = setInterval(animate, 5000);
  }

  //Hide everything except first slide and controls

  $('.slidewrap div:not(.slidewrap div:first,.slidewrap .slide_controls)').hide();

  var animate = function() {

    /*if .pagination_active is last removeClass and addClass to .pagination_active 
             first li tag*/

    if ($('.pagination_active').is($('.slide_controls ul li:last'))) {
      $('.pagination_active').removeClass('pagination_active');
      $('.slide_controls ul li:first').addClass('pagination_active');
    } else {
      $('.pagination_active').removeClass('pagination_active').next().addClass('pagination_active');
    }

    /*if div.active is last fadeOut and add .active class 
             to the first div and fadeIn FIRST div then CLEAR INTERVAL and set intervalID to zero */

    if ($('.active').is($('.slidewrap div:last'))) {
      $('.active').fadeOut(1000).removeClass('active');
      $('.slidewrap div:first').addClass('active').fadeIn(1000, function() {
        clearInterval(intervalID);
        intervalID = 0;

      });
    }

    //OR .active fadeOut and next div fadeIn
    else {
      $('.active').fadeOut(1000).next().fadeIn(1000, function() {
        $('.slidewrap div.active').removeClass('active').next('div').addClass('active');

      });
    }

  }

  var intervalID;
  intervalID = setInterval(animate, 3000);

});

  • Sie können es nicht neu starten; es ist gelöscht, gelöscht. Was Sie tun können, ist ein NEUES Intervall mit der gleichen Funktion zu starten. –

    – Brandstifter

    7. Juni 2012 um 15:39 Uhr

  • @Blazemonger Sir, Sie haben meinen Beitrag bearbeitet und mich gleichzeitig auch. Also habe ich Ihre wertvolle Bearbeitung verloren. Wenn Sie es für notwendig halten, können Sie meine Antwort bearbeiten, es wird mir ein Vergnügen sein

    – das Codeparadoxon

    7. Juni 2012 um 15:46 Uhr

1647100867 935 Wie losche ich das Intervall und setze es erneut
das Codeparadox

Nach dem Löschen eines Intervalls müssen Sie es erneut mit starten setInterval().

Es wäre besser, Funktion für Ihre zu machen setInterval()

var intervalID = null;

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

Hier flag ist ein boolean Variable mit Wert true/ false. true wird ausführen setInterval() und false Wille clearInterval();

Jetzt können Sie die obige Funktion nach Bedarf verwenden.

Zum Beispiel:

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

intervalManager(false);  // for clearInterval

  • Ein bereits gelöschtes Intervall kann nicht neu gestartet werden. Aber warum fängt man nicht einfach neu an?

    – YMMT

    7. Juni 2012 um 15:43 Uhr

  • THX thecodeparadox für deine Zeit und deine Antwort! Ich schätze es!

    – Dejo Dekic

    7. Juni 2012 um 15:54 Uhr

Nur Beispiel

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>

Hier ist ein Hilfsobjekt, das einen Rückruf und ein Intervall akzeptiert, mit dem Sie ein Intervall starten und stoppen können.

   //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
        }

    };  

*Du würdest es so verwenden *

<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="https://stackoverflow.com/questions/10935026/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>

Lösung für Timer, der 15 Sekunden zählt und dann zur Hauptseite geht, wenn auf dem Bildschirm geklickt wird, wird der Timer auf den Start zurückgesetzt. Es kann für jemanden nützlich sein. (x ist Zähler für Berührungsereignisse) :

  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);
    }
  }

1647100867 617 Wie losche ich das Intervall und setze es erneut
Neil

In meinem Projekt (mit Sveltekit), habe ich gelernt, dass man dazwischen schleifen kann setInterval und clearInterval verwenden let innerhalb einer Funktion, um einen NodeJS-Timer zu definieren:

$: number = 0 //The "$" sign, in this case, is used to a make reactive statement 

const changeValue = (e: any) => {
    let changingValue = setInterval(() => {
        number += 0.01
        if (number >= 0.2) {
            clearInterval(changingValue)
        }
    }, 4)
}, 
changeValueAgain = (e: any) => {
    let changingValue = setInterval(() => {
        number -= 0.01
        if (number <= 0) {
            clearInterval(changingValue)
        }
    }, 4)
}

(Ich habe übrigens Typescript verwendet) Es ist einfach, jedes Mal, wenn Sie die Funktionen aufrufen, wird ein neuer NodeJS-Timer erstellt, der gelöscht wird, wenn eine Bedingung wahr ist

Die e Parameter wurde für Ereignishandler verwendet …

994240cookie-checkWie lösche ich das Intervall und setze es erneut?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy