CODEWITHSUNDEEP
javascriptjquerymobile-safarisettimeout
pugia
pugia

Reputation: 442

setTimeout not working on safari mobile

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

Upvotes: 14

Views: 34979

Answers (5)

totesz09
totesz09

Reputation: 154

I encountered a similar issue.

The problem arose on iOS mobile devices running the Safari browser.

Based on this answers:

I opted for an alternative approach by switching from setTimeout to setInterval. However, this solution is slightly more complex as it requires calling clearInterval once the desired time has elapsed.

Upvotes: 0

Paul Kane
Paul Kane

Reputation: 111

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.

Upvotes: 0

jcomeau_ictx
jcomeau_ictx

Reputation: 38442

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.

Upvotes: 2

Rene Poulsen
Rene Poulsen

Reputation: 81

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 :-)

Upvotes: 8

mati
mati

Reputation: 5348

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.

Upvotes: 2

Related Questions