Make jquery function start

Question

I have some issues starting this function what am i doing wrong?

I want this to start writing when my menu has reached the section "topb".

This is the attempt from me:

var $el = $('.writer'),
    txt = $el.text(),
    txtLen = txt.length,
    timeOut,
    $topb = $('#topb'),
    char = 0;

$el.text('|');

if (topb.hasClass('active')) {
    (function typeIt() {
        var humanize = Math.round(Math.random() * (200 - 30)) + 30;
        timeOut = setTimeout(function () {
            char++;
            var type = txt.substring(0, char);
            $el.text(type + '|');
            typeIt();

            if (char == txtLen) {
                $el.text($el.text().slice(0, -1)); // remove the '|'
                clearTimeout(timeOut);
            }
        }, humanize);
    }())
};

This is the original function

var $el = $('.writer'),
    txt = $el.text(),
    txtLen = txt.length,
    timeOut,
    char = 0;

$el.text('|');

(function typeIt() {
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function () {
        char++;
        var type = txt.substring(0, char);
        $el.text(type + '|');
        typeIt();

        if (char == txtLen) {
            $el.text($el.text().slice(0, -1)); // remove the '|'
            clearTimeout(timeOut);
        }
    }, humanize);
}())
};

$topb = $('#topb') and topb.hasClass('active'), you forgot about "$" sign. — pushOk
– pushOk, Commented Sep 15, 2014 at 11:42
@pushOk: true (already mentioned below), but that is the least of their problems as that code is never run again :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Sep 15, 2014 at 13:09

iCollect.it Ltd · Accepted Answer · 2014-09-15 11:39:32Z

1

The original code uses a timer to repeat the operation until a certain condition is met (calls itself recursively). You have placed your if check outside of that, so it never runs.

Do your check inside the timer, so it is checked repeatedly. Like this:

var $el = $('.writer'),
    txt = $el.text(),
    txtLen = txt.length,
    timeOut,
    $topb = $('#topb'),
    char = 0;

$el.text('|');

(function typeIt() {
    if ($topb.hasClass('active')) {
        var humanize = Math.round(Math.random() * (200 - 30)) + 30;
        timeOut = setTimeout(function () {
            char++;
            var type = txt.substring(0, char);
            $el.text(type + '|');
            typeIt();

            if (char == txtLen) {
                $el.text($el.text().slice(0, -1)); // remove the '|'
                clearTimeout(timeOut);
            }
        }, humanize);
    }
    else{
        // do nothing but repeat the timer (e.g. after 2 seconds)
        timeOut = setTimeout(typeIt, 2000);
    }
}());

edited Sep 15, 2014 at 11:39

answered Sep 15, 2014 at 11:33

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Strigo Over a year ago

Okey but it dosent work even if i dosent use the if statement to start it @TrueBlueAussie

iCollect.it Ltd Over a year ago

There may be more than one bug... This was a guideline to fix the obvious one. A JSFiddle example is usually the best way to demonstrate a problem like this. Then we can all guarantee it works completely :)

Strigo Over a year ago

Ok i will test some more and se if i can fix it :) thank you for your awnser! @TrueBlueAussie

iCollect.it Ltd Over a year ago

Note: There was a typo in my example... now fixed (a $ was missing on $topb.hasClass('active'))

Collectives™ on Stack Overflow

Make jquery function start

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related