Javascript functie 1x laten uitvoeren

Pagina: 1
Acties:

Vraag


Acties:
  • 0 Henk 'm!

  • tiswat
  • Registratie: September 2006
  • Laatst online: 21:43
Ik heb een script die een typewriter nadoet, alleen deze wil ik maar 1x uitvoeren.
Nu ben ik een leek op javascript gebied, dus kom er bijna niet uit.

Wie o wie kan mij helpen of in ieder geval uitleg geven om mij op het goede pad te zetten.

Gaat overigens om dit script:
http://codepen.io/hi-im-si/pen/DHoup


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 200;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };


    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }


        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 2px solid #000000}";
        document.body.appendChild(css);
    };

[ Voor 0% gewijzigd door .oisyn op 18-06-2016 20:51 ]

Alle reacties


Acties:
  • +1 Henk 'm!

  • .oisyn
  • Registratie: September 2000
  • Laatst online: 22:33

.oisyn

Moderator Devschuur®

Demotivational Speaker

Hoi tiswat,

Wat heb je zelf zoal al geprobeerd? Snap je überhaupt een beetje wat de code doet? Op zich is het niet de bedoeling dat wij hier op GoT eventjes je script fixen, dat zul je uiteindelijk toch echt zelf moeten doen. Wel kunnen we je natuurlijk op weg helpen, maar dan is het handig om een inschatting te kunnen maken in hoeverre je zelf de code snapt :). Hier staat een leidraad voor een goede topicstart: Het algemeen beleid #quickstart. Btw, ik ben zo vrij geweest je topicstart iets te editen door code in [code]...[/code] tags te zetten, zodat het wat beter te lezen is.

Wat bedoel je met "ik wil het maar 1x uitvoeren"? Wat gebeurt er nu, en waarom voldoet dat niet aan je verwachtingen?

[ Voor 10% gewijzigd door .oisyn op 18-06-2016 20:55 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.


Acties:
  • 0 Henk 'm!

  • q-enf0rcer.1
  • Registratie: Maart 2009
  • Laatst online: 09-10 14:44
Zodra loopNum gelijk is aan array length(toRotate) moet je de functie (tick) stoppen ;) Die blijft zichzelf anders opnieuw aanroepen.