Question

I want to reset this flash in between so that i need not have to wait till the end to restart the flash, how do i reset this?

function flash() {
var arrayId = 0,
    splitSet = $('#text_original').html().split(" "),
    splitSetLength = splitSet.length;


function flashWord() {
    $("#flash_word").html(splitSet[arrayId]);
    arrayId += 1;
    var t = setTimeout(remove, 1000);
}

function remove() {
    if (arrayId < splitSetLength) {
        $("#flash_word").html(" ");
        flashWord();
    } //else reset_flash();
}
flashWord(); }

please see the http://jsfiddle.net/HcDfS/

Answer 1

Make the timer variable a global one and cancel the time-out on it (with clearTimeout()). Then, hide #flash_word.

I took the liberty of re-implementing your fiddle:

var timer, words;

function startFlashing() {
    words = $("#source").text().split(" ");
    showNextWord(0);
}

function stopFlashing() {
    clearTimeout(timer);
    $("#banner").text("");
}

function showNextWord(index) {
    $("#banner").text(words[index]);
    index++;
    if (index < words.length) timer = setTimeout(function () {
        showNextWord(index);
    }, 1000);
    else $("#banner").text("");
}

​
With HTML:

<p id="source">This is the text to be flashed.</p>
<button onclick='startFlashing()'>Start Flashing!</button>
<button onclick='stopFlashing()'>Stop Flashing!</button>
<p id="banner"></p>​

And it’s here: http://jsfiddle.net/CZnVc/6/