setTimeout not working on safari mobile

Question

I have a function that shows a menu when clicking on it, and I want it to disappear after 5 seconds. This is my javascript - it works properly on desktop browser but it doesn't disappear on the mobile ones.

$(function() {
    $('#prod_btn').click(function() {
        $(this).addClass('selected').next('ul').css('display', 'block');
        setTimeout(hideMenu, 5000);
    });
});

function hideMenu() {
    $('#prod_btn').removeClass('selected').next('ul').css('display', 'none');
}

Where is the problem?

Thanks

The timeout is firing in safari mobile for me when I put an alert() in the hideMenu() function. Is it working for you? — Ben L, Nov 22 '11 at 16:55
I tried but it doesn't show anything, it seems that it don't fire the function... — pugia, Nov 22 '11 at 17:42
What versions are you using of jquery, safari, etc? It works for me with jquery 1.6.4 and iOS 4.3 on the simulator. Are you getting errors? — Ben L, Nov 22 '11 at 17:55
I tried on iPhone 4 and iPad 2 with iOS 5, and on iPhone 3GS with 4.3 and it still not works, I'm using jquery 1.6.2 — pugia, Nov 22 '11 at 18:56
I have no errors, just don't do anything, neither the alert message... — pugia, Nov 22 '11 at 18:57
I also tried with jquery 1.7 from google apis whitout any change — pugia, Nov 22 '11 at 18:59

score 7 · Answer 1 · answered Jun 12 '12 at 07:11

I've just had the same problem. My code is running great in any browser on my Mac, but on iOs devices it doesn't work.

I use ".bind(this)" on my timeout function and that is what is causing the problem for me. When I extend the function object with ".bind" in my script it works like a charm.

My code is something like this:

searchTimeout = setTimeout(function() {
...
}.bind(this),250);

For this to work on iOs devices I (like mentioned above) just added this:

Function.prototype.bind = function(parent) {
    var f = this;
    var args = [];

    for (var a = 1; a < arguments.length; a++) {
        args[args.length] = arguments[a];
    }

    var temp = function() {
        return f.apply(parent, args);
    }

    return(temp);
}

I don't see any .bind on your setTimeout, but for others with the same problem this may be the issue. That's why I'm posting :-)

This is a major issue. I just went through trying to debug 20k lines trying to figure out why it was working in iOS 6 and not iOS 5. Thanks!!! — Garrett, Dec 09 '12 at 11:22

score 2 · Answer 2 · answered Aug 05 '13 at 06:26

this doesn't apply to your code, but a common problem with long-running scripts failing on iOS devices is that MobileSafari kills a javascript thread after 10 seconds have elapsed. you should be able to use setTimeout and/or setInterval to work around this, or you can avoid it by making a shortcut to it and thereby running it as an app. see https://discussions.apple.com/thread/2298038, particularly the comments by Dane Harrigan.

score 2 · Answer 3 · answered Dec 01 '11 at 17:16

I moved your example to a jsbin, and it's working on my iphone 4.

Please test it out going here from your devices: http://jsbin.com/asihac/5

You can see the code here http://jsbin.com/asihac/5/edit

The example is using jQuery - latest and I only added the required css class.

score 0 · Answer 4 · answered Sep 16 '13 at 18:33

Keep in mind also that any setTimeout function is actually likely fire while DOM elements are rendering if the delay is set to a value too short. While that might seem obvious, it can be easily confused with no method firing whatsoever. A good way to test is to have an alert prompt run.

window.onLoad(alert("hey!"));

Then check to see if your function fires after.

setTimeout not working on safari mobile

4 Answers4

Linked