settimeout not working i dont know why

Question

                $('form[name=addform]').submit(function() {
                    if(error == true){
                        return false;
                    }else{


                        $('#loading').empty();
                        $('#loading').append("<img src = './images/ajax-loader.gif'/>");
                        $('#loading').show();

                        setTimeout(function(){
                              return true;
                        }, 4000);


                    }
                    error = false;
                });

i need to load gif image before executes the return true. i do not use ajax for this please help

why don't you load the image first and submit the form from js after that? :? — Hristo Valkanov, Jul 18 '13 at 10:35
Is it the form submit using AJAX or not?? If not, it seems will not show the image. — Allen Chak, Jul 18 '13 at 10:41
Show() can have a callback function, check the api to figure out how to write the code and you can also set a duration to the show method. — OQJF, Jul 18 '13 at 10:48
i need to delay the return statement so that gif image loads before it returns true — user2595051, Jul 18 '13 at 10:48
Wouldn't it be easier to just have the loading image already loaded but hidden with css then show it when it is required? Wouldn't need a false delay waiting for it to be loaded then. — Richard Dalton, Jul 18 '13 at 11:01

score 3 · Answer 1 · answered Jul 18 '13 at 10:30

3

I'm not exactly sure what you are trying to accomplish, but that code won't work. setTimeout() does not pause the function it has been called from, nor does the return statement in the callback affect it.

answered Jul 18 '13 at 10:30

Ulrich Schmidt-Goertz

1,096
6
10

is their any alternative codes that i can use? how can i load a gif image befofe it executes the return statement? pls help. – user2595051 Jul 18 '13 at 10:37
So you want to make sure the loader image is shown before submitting the form? I suppose the easiest way would be to have the image pre-loaded in your DOM. Then you only have to set it to visible, which is instantly. You also avoid making your user wait 4 seconds before his request is processed, which I don't think is a good idea. – Ulrich Schmidt-Goertz Jul 18 '13 at 10:59

score 0 · Answer 2 · edited May 23 '17 at 10:25

JavaScript is asynchronous, not synchronous - setTimeout will not 'block' the execution of the next line of code. (See related What is the difference between synchronous and asynchronous programming (in node.js))

To submit the form after a delay (for what purpose is unclear) you will first need to stop the form submitting (by cancelling the event) then submit the form once again as when setTimeout callback is executed.

$('form').on('submit', function(event) {

  // Prevent the form from submitting
  event.preventDefault();

  // 'this' is referring to the event target
  var form = this;

  // It may not be required to wrap the `form.submit` method but it's usually safer to do so
  setTimeout(function() {
    form.submit()
  }, 4000);

});

Here is an example http://jsfiddle.net/xppNp/1/

I have added an example for anybody that would like to see my explanation in action. — i_like_robots, Jul 18 '13 at 12:11

settimeout not working i dont know why

2 Answers2