why setTimeout() only run my code once,at first time?

Question

i use this javascript code to open two pictures and toggle a vertical menu by clicking on another picture. an know i want to run code without clicking on image, with a timer. so i wrote this code but it run only once at first time. what's wrong with my code?

<script type="text/javascript">
        $(document).ready(function () {
            $("#lista2").slideToggle(1);
            $curtainopen = false;
                        $(".rope").click(function () {
            $(this).blur();
            if ($curtainopen == false) {
                var selected = $(this).val();
                var image = $(".rope");
                image.fadeOut('fast', function () {
                    $("#largeImg").attr('src', 'images/power-on.png');
                    image.fadeIn('fast');
                });

                $(".leftcurtain").stop().animate({ left: '-120px' }, 2000);
                $(".rightcurtain").stop().animate({ left: '120px' }, 2000);

                $("#R").attr('src', 'images/Right.gif');
                $("#L").attr('src', 'images/Left.gif');
                $curtainopen = true;
                $("#lista2").slideToggle(2000);
                $(this).attr('id', '1');
            } else {
                var selected = $(this).val();
                var image = $(".rope");
                image.fadeOut('fast', function () {
                    $("#largeImg").attr('src', 'images/power-off.png');
                    image.fadeIn('fast');
                });

                $(".leftcurtain").stop().animate({ left: '0px' }, 2000);
                $(".rightcurtain").stop().animate({ left: '0px' }, 2000);
                $curtainopen = false;
                $("#lista2").hide();
                $(this).attr('id', '0');
            }
            return false;
                        });
        });

            function startTimer() {
                setTimeout($(".rope").click(), 4000);

            }

    </script>

`setTimeout(function(){$(".rope").click()}, 4000);` – A. Wolff Jan 04 '14 at 11:26 — A. Wolff, Jan 04 '14 at 11:26

score 3 · Accepted Answer · answered Jan 04 '14 at 12:00

use this to execute your code after a specific time interval

setInterval(function() {
    $(".rope").click(); // this will execute after every 4 sec.
}, 4000);

use this to execute your code after a specific time delay

 setTimeout(function() {
        $(".rope").click(); // this will execute after 4 sec delay only once.
    }, 4000);

use above according to your requirement

score 1 · Answer 2 · answered Jan 04 '14 at 11:25

1

setTimeout need a function, When you are passing $(".rope").click() it is called immediately.

Use it like

function startTimer() {
    setTimeout(function () {
        $(".rope").click();
    }, 4000);
}

answered Jan 04 '14 at 11:25

Satpal

132,252
13
159
168

Please consider explaining the issue when you answer. – Benjamin Gruenbaum Jan 04 '14 at 11:26

score 0 · Answer 3 · answered Jan 04 '14 at 11:26

setTimeout(function() {
    $(".rope").click();
}, 4000);

because setTimeout needs a function, but $(".rope").click() calls itself immediatly (instead of assigning a function to be called). So you don't want to call a function but to pass it to setTimeout.

score 0 · Answer 4 · answered Jan 04 '14 at 11:52

A timer implies repeating the function after each timeout. setTimeOut only delays a function once (after a given time, in milliseconds).

function startTimer() {
  //do your stuff
  $(".rope").click();
  //repeats itself after 4 seconds
  setTimeout(startTimer, 4000);
}

And do not forget to start it on document ready :

$(document).ready(function () {
  startTimer();
  ...
}

I you don't want your function to be called immediately on page load, you can add an initial delay :

$(document).ready(function () {
  setTimeout(startTimer, 5000); //the timer will start only 5 seconds after page load
  ...
}

why setTimeout() only run my code once,at first time?

4 Answers4