Run one function after another with setInterval ()

Question

Run one function after another with setInterval ()

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

var div500 = document.querySelector("#sec120");
        var div501 = document.querySelector("#sec121");
        var div502 = document.querySelector("#sec122");

        function op100() {
            if (div500.style.display == "block") {
                div500.style.display="none";
                div501.style.display="none";
                div502.style.display="none";
            } else {
                div500.style.display="block";
                div501.style.display="none";
                div502.style.display="none";
            }
        }

        function op101() {
            if (div501.style.display == "block") {
                div500.style.display="none";
                div501.style.display="none";
                div502.style.display="none";
            } else {
                div500.style.display="none";
                div501.style.display="block";
                div502.style.display="none";
            }
        }

        function op102() {
            if (div502.style.display == "block") {
                div500.style.display="none";
                div501.style.display="none";
                div502.style.display="none";
            } else {
                div500.style.display="none";
                div501.style.display="none";
                div502.style.display="block";
            }
        }

        function op200() {

            var opfx20 = []
            opfx20[0] = op100();
            opfx20[1] = op101();
            opfx20[2] = op102();
            
        var opn30 = 0; 

            if (opn30 < opfx20.length - 1) {
                opn30++;
            } else {
                opn30 = 0;
            } 

        }

        setInterval(op200, 1500);

<style type="text/css">

        #bd300 {margin:0px;}

        #sec120, #sec121, #sec122 {text-align: center;
            padding: 80px 20px 80px 20px;
            margin: 15px 0px 15px 0px;
            background: #ccc;
            display: none;} 

        #sec300 {position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        padding: 50vh 0vh 0vh 0vh;
        text-align: center;
         }

    </style>

<section id="sec120">
        <div id="div220">
            <p> Section 1</p>
        </div>
    </section>
    
    <section id="sec121">
        <div id="div221">
            <p> Section 2</p>
        </div>
    </section>
            
    <section id="sec122">
        <div id="div222">
            <p> Section 3</p>
        </div>
    </section>

    <section id="sec300">
        <button onclick="op100();"> Section 1 </button>
        <button onclick="op101();"> Section 2 </button>
        <button onclick="op102();"> Section 3 </button>
        <button onclick="op200();"> Section all </button>
    </section>

Brothers ... hello everyone! One question ... I'm practicing and trying to make a slider ... and I have this that you see ...

What I intend is that the setInterval execute the functions op100, op101, op102 one behind the other, and the result is that the op102 function is executed immediately without going through the other 2 first ... they know how to do that ...?

the function of the interval is op200 ().

that I must correct to run

op100 () - > ends and begins - > op101 () - > ends and begins - > op102 ().

???

Gracais beforehand! bn dia.!

javascript

asked by Digitalit Company 05.10.2018 в 16:32

source

2 answers

SVG file - best way to save changes Error HRESULT E_FAIL has been returned from a call to COM component when wanting to add a reference

score 0 · Answer 1

Declare your op100, op101 y op102 functions as:

var op100 = function {
    if (div500.style.display == "block") {
        div500.style.display="none";
        div501.style.display="none";
        div502.style.display="none";
    } else {
        div500.style.display="block";
        div501.style.display="none";
        div502.style.display="none";
    }
}

var op102 = function() {
    if (div502.style.display == "block") {
        div500.style.display="none";
        div501.style.display="none";
        div502.style.display="none";
    } else {
        div500.style.display="none";
        div501.style.display="none";
        div502.style.display="block";
    }
}

var op102 = function() {
    if (div502.style.display == "block") {
        div500.style.display="none";
        div501.style.display="none";
        div502.style.display="none";
    } else {
        div500.style.display="none";
        div501.style.display="none";
        div502.style.display="block";
    }
}

And declares the following out of all functions:

var opn30 = 0; 
var opfx20 = [];
opfx20.push(op100);
opfx20.push(op101);
opfx20.push(op102);

And your function op200 would be:

function op200() {      
    if (opn30 < opfx20.length - 1) {
        opn30++;
    } else {
        opn30 = 0;
    } 
    opfx20[opn30]();
}

The call to setInterval, the remaining javascript and the html is maintained. I hope it works for you

score 0 · Answer 2

In response to your question, I used setTimeout , which receives as a parameter a function function (){showPanel(div500)} and one time in milliseconds.

I'll leave your code, somewhat edited.

var div500 = document.querySelector("#sec120");
var div501 = document.querySelector("#sec121");
var div502 = document.querySelector("#sec122");

function showPanel(panel) {
  div500.style.display = "none";
  div501.style.display = "none";
  div502.style.display = "none";
  panel.style.display = "block";
}

function op200() {
  setTimeout(function (){showPanel(div500)}, 1500);
  setTimeout(function (){showPanel(div501)}, 3000);
  setTimeout(function (){showPanel(div502)}, 4500);
}

setInterval(function(){op200()},4501);

#bd300 {
    margin: 0px;
  }

  #sec120,
  #sec121,
  #sec122 {
    text-align: center;
    padding: 80px 20px 80px 20px;
    margin: 15px 0px 15px 0px;
    background: #ccc;
    display: none;
  }

  #sec300 {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    padding: 50vh 0vh 0vh 0vh;
    text-align: center;
  }

<section id="sec120">
  <div id="div220">
    <p> Section 1</p>
  </div>
</section>

<section id="sec121">
  <div id="div221">
    <p> Section 2</p>
  </div>
</section>

<section id="sec122">
  <div id="div222">
    <p> Section 3</p>
  </div>
</section>

<section id="sec300">
  <button onclick="showPanel(document.querySelector('#sec120'))"> Section 1 </button>
  <button onclick="showPanel(document.querySelector('#sec121'))"> Section 2 </button>
  <button onclick="showPanel(document.querySelector('#sec122'))"> Section 3 </button>
  <button onclick="op200()"> Section all </button>
</section>

To make it loop, a setInterval is added.

setInterval(function(){op200()},4501);

On the other hand, your code is inefficient. There are many repeated lines. I changed him just a little, but there are many things to see. Also, as a personal recommendation, use representative names for variables and functions. It is easier for another to read your code, and for yourself, to realize what each one is.