在浏览器停止按钮点击时执行操作

Question

6

如果这听起来过于简单，对不起；我是 JQuery 的新手。我已经搜索并找到了一些类似这样的问题，但它们似乎并没有完全回答我的问题。

我正在使用 JQuery 为需要很长时间才能完成的操作显示一个简单的进度指示器：

$(document).ready(function() {
    $('form').submit(function() {
        $('#progress').show();
    });
});

当用户单击表单按钮时，我会显示一个带有动画gif的div。这个div在页面可见的其余时间内都是可见的。表单操作完成后，会加载一个新页面。

虽然这个方法很好用，但是如果用户在操作完成之前在浏览器中单击“停止”怎么办？如何让这个div消失？是否有一种方式来捕捉这个事件，或者有更好的处理整个情况的方法？

谢谢你的帮助。

- user1919238

你很可能无法捕获该事件。但更好的方法是使用 AJAX 提交表单数据。也许看看这个。 - musefan

你可以直接选择该div并将其删除吗？类似这样：$('#progress').remove() 将会从DOM中移除它。但它不会停止任何正在发生的操作。要停止操作需要根据你运行操作的方式采取其他措施。 - ckersch

@musefan，长时间运行的进程导致提交表单数据需要很长时间。我知道我可以使用AJAX在浏览器中提供任何类型的反馈。但是我试图避免这种复杂性（对我来说包括学习AJAX...）。 - user1919238

@ckersch，我知道如何使div消失-问题是如何触发该消失？我如何知道停止按钮何时被按下并对其做出响应？ - user1919238

1

@dan1111 我认为学习ajax的工作原理绝对值得你花时间去学习，而且既然你已经在使用jQuery，那么你将会利用到jQuery API的很大一部分... - excentris

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- paulitto · Answer 1

您可以使用“onstop”事件来处理此问题，但它仅适用于IE。我认为您无法处理其他浏览器的此类事件。

您可以尝试在短暂的超时后让进度对话框消失：

$('form').submit(function() {
    $('#progress').show();
    setTimeout(function(){
             $('#progress').hide();  
    },3000);
});