Question

I am writing a jQuery program that automatically “types” a block of text. I am trying to allow the user to restart the function “Clear the text and restart the function” I’m not sure how to do this. Here is the Code:

var char = 0;
var caption = "";
var standby

// initiate the Cursor

$(document).ready(function() {
    setInterval ( "cursorAnimation()", 600);
});

// initiate the Text

$(document).ready(function() {
    $('#abouttext').aboutText();
});


// The typing animation

function aboutText() {
    $('#abouttext').html(caption.substr(0, captionLength++));
    if(captionLength < caption.length+1){
        setTimeout("type()",50);
    }else{
        captionLength = 0;
        caption = "";
    }
}

// The Restart Button

function restart() {
    $('#restartbtn').click(function () {
        var typing = $('#abouttext');
    }
        typing.stop();



// The cursor animation

function cursorAnimation() {
    $('.cursor').animate({
        opacity : 0
    }, "fast", "swing").animate({
        opacity : 1
    }, "fast", "swing");
}

I’m guessing you have to stop the function with stop(); and after that restart the whole thing. But I’m not sure how to. Any help would be awesome. -Thanks!

Answer 1

Well since you’re using intervals, have that interval be saved into a more globally scoped variable:

var typeThings = setInverval(function() { 'your func here' }, 50);

This way on that Restart button click you can:

clearInterval(typeThings); // stop the typing
$('#abouttext').html(''); // clear original text
callYourOriginalFunction(); // call the function again

Hope that helps somewhat!