JQuery function to display text on a timed interval

Question

I have an external JavaScript file that contains some calculations. The results are put into an array. I've written some 'get' functions to return the values of a passed in index value. In my HTML file, I've written a function to display the array on a new line every 1 second. Here is the code for that:

<script>
var showSequence = function (target, message, index, interval) {
    if(index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function (){ showSequence(target, message, index, interval); }, interval);
    }
}
</script>

I call it like:

    <body>  
<script>
    $function(){
        for(var i = 0; i < getArrayLength(); i++){
            showSequence('#calculations', getArrayValue(i) + '<br />', i, 1000);
        }               
    }
</script>
<h1>Fibonacci Calculation:</h1>
<p id='calculations'></p>

However I get an unexpected token { error. Being new to JavaScript, I can't find a missing {. Looking for a little help on this.

two things first the missing ; at the end of showSequence('#calculations', getArrayValue(i) + '
', i, 1000) then the $funciton() that I am not sure if its legal or not but might be another implementation I just did'nt knew about. — Sebastien, Sep 30 '14 at 21:55

score 0 · Answer 1 · edited May 23 '17 at 11:58

Try substituting ( for $ at beginning of second function , and adding ()) to close of second function , to create and call an Immediately-Invoked Function Expression ("IIFE") . See What is this (IIFE) construct in javascript? .

Alternatively , could remove $ from beginning of second function , provide a name for the second function , and call the second function by name ; i.e.g.,

function runSequence(){
            for(var i = 0; i < arr.length; i++){
                showSequence('#calculations', arr, i, 1000)
            }               
        };
runSequence();

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

var showSequence = function (target, message, index, interval) {
    if(index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function (){ showSequence(target, message, index, interval); }, interval);
    }
};
    // substituted `(` for `$` at beginning of function
    (function(){
        for(var i = 0; i < arr.length; i++){
            showSequence('#calculations', arr, i, 1000)
        }               
    }()) // added `())` at closing of function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Fibonacci Calculation:</h1>
<p id='calculations'></p>

It's a requirement to use JQuery. The $ signifies accessing the JQuery library. Removing said elements would eliminate JQuery wouldn't it? It would be pure JavaScript? — jarheadWill, Oct 01 '14 at 01:33

OxyDesign · Answer 2 · 2014-10-01T06:45:07.393

0

Why did you add the $function() ? It doesn't exist. Just delete it and it will work I think

JS

//$function(){
    for(var i = 0; i < getArrayLength(); i++){
        showSequence('#calculations', getArrayValue(i) + '<br />', i, 1000);
    }               
//}

EDIT : I think I understand what you tried to do

JS

$(function(){
    for(var i = 0; i < getArrayLength(); i++){
        showSequence('#calculations', getArrayValue(i) + '<br />', i, 1000);
    }               
})

edited Oct 01 '14 at 06:45

answered Sep 30 '14 at 22:49

OxyDesign

754
5
6

It's a requirement to use JQuery. The $ signifies accessing the JQuery library. Removing said elements would eliminate JQuery wouldn't it? It would be pure JavaScript? – jarheadWill Oct 01 '14 at 01:32
sorry forgot to include you in the post. – jarheadWill Oct 01 '14 at 01:55
I edited my answer. I think you want to use `$(function(){});` and that is right to use but `$function()`, I think it's impossible because it means you want to invoke the function named `$function` and you never declared it. Or you need to create this function like this function `$function(){ //your code }` then you can invoke a function `$function()` and there's no error – OxyDesign Oct 01 '14 at 06:49
*Or you need to create this function like this `function $function(){ //your code }` – OxyDesign Oct 01 '14 at 08:02

score 0 · Accepted Answer · answered Oct 01 '14 at 17:45

0

Found the issue. So I had to wait until JQuery was ready before I performed a set of functions. I needed to replace:

    $(function(){ //Do Stuff here });

with:

    $(document).ready(function() { //Do Stuff here });

answered Oct 01 '14 at 17:45

jarheadWill

63
1
1
7

JQuery function to display text on a timed interval

3 Answers3