Javascript setTimeout 不适用于 Safari 移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8230380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
setTimeout not working on safari mobile
提问by pugia
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.
我有一个功能，点击它时会显示一个菜单，我希望它在 5 秒后消失。这是我的 javascript - 它在桌面浏览器上正常工作，但在移动浏览器上不会消失。
$(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
谢谢
回答by Rene Poulsen
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.
我刚刚遇到了同样的问题。我的代码在 Mac 上的任何浏览器中都运行良好，但在 iOs 设备上却无法运行。
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.
我在我的超时函数上使用了“.bind(this)”，这就是导致我出现问题的原因。当我在脚本中使用“.bind”扩展函数对象时，它就像一个魅力。
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:
为了使其在 iOs 设备上工作，我（如上所述）刚刚添加了以下内容：
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 :-)
我在您的 setTimeout 上没有看到任何 .bind，但对于其他有同样问题的人来说，这可能是问题所在。这就是我发帖的原因:-)
回答by Matias
I moved your example to a jsbin, and it's working on my iphone 4.
我将您的示例移到了 jsbin，它可以在我的 iphone 4 上运行。
Please test it out going here from your devices: http://jsbin.com/asihac/5
请从您的设备到这里进行测试：http: //jsbin.com/asihac/5
You can see the code here http://jsbin.com/asihac/5/edit
你可以在这里看到代码http://jsbin.com/asihac/5/edit
The example is using jQuery - latest and I only added the required css class.
该示例使用 jQuery - 最新的，我只添加了所需的 css 类。
回答by jcomeau_ictx
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 shouldbe 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.
这不适用于您的代码，但在 iOS 设备上长时间运行的脚本失败的一个常见问题是 MobileSafari 在 10 秒后终止了一个 javascript 线程。你应该能够使用 setTimeout 和/或 setInterval 来解决这个问题，或者你可以通过创建一个快捷方式来避免它，从而将它作为一个应用程序运行。请参阅https://discussions.apple.com/thread/2298038，尤其是 Dane Harrigan 的评论。
回答by Paul Kane
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.
还要记住，如果延迟设置的值太短，则任何 setTimeout 函数实际上都可能在 DOM 元素渲染时触发。虽然这看起来很明显，但它很容易与没有任何方法触发相混淆。一个很好的测试方法是运行警报提示。
window.onLoad(alert("hey!"));
Then check to see if your function fires after.
然后检查您的函数是否在之后触发。
