Safari在表单提交过程中没有更新用户界面

Question

我有一个JavaScript函数来提交表单。

我的函数的第一步是禁用它（以防止多次点击）并应用一个更好地说明它已被禁用的类。我还将文本更改为“请等待...”

下一步是验证我的表单。如果验证失败，撤销第一步中的更改，使按钮恢复到正常状态。

如果验证通过，则提交表单。

所有这些基本上是在同一个过程中发生的。

我发现在Safari中，该过程的第一个阶段（按钮样式）几乎被忽略了。经过进一步挖掘，我意识到它确实起作用，但UI在进程完成之前没有重绘。问题在于，进程的完成是重定向离开页面，因此用户永远无法看到“请等待...”

然后我探索了Safari为什么不重新绘制UI，并发现了许多解决方法，以下是其中的一个示例：

// Aims to trigger the redraw by 'resetting' it
elem.style.display='none';
elem.offsetHeight;
elem.style.display='';

我尝试的另一个方法是使用系统主要的 JavaScript 库 Prototype，通过在更新前/后故意隐藏和显示元素来实现：

elem.hide();
elem.addClassName('disabledBtn');
elem.disable();
elem.update('Please Wait');
elem.show();

另一种方法是创建一个“redraw”方法来强制重新绘制。

Element.addMethods({
    redraw: function(element){
        element = $(element);
        var n = document.createTextNode(' ');
        element.appendChild(n);
        (function(){n.parentNode.removeChild(n)}).defer();
        return element;
    }
});
...
elem.addClassName('disabledBtn');
elem.disable();
elem.update('Please Wait');
elem.redraw();

这些方案都不可行。在完成过程中，直到用户重定向后，该进程才会更新UI。值得一提的是，这是一个相当复杂的表单，在提交期间需要几秒钟的处理时间，因此这是用户体验的噩梦。

有其他人遇到过这种情况吗？

- Dan Hanly

---

这里也有同样的问题... 有更新吗？ - Zevi Sternlicht

Answer 1

我已经想通了。

由于这只是一个解决问题的变通办法，而不是解决问题的方法，我仍然愿意接受其他可能直接解决问题的答案。

我考虑了这个“进程”术语，以及如何有效地结束该进程——从而应用样式，并启动另一个进程来提交表单。

我找到的方法是将我的代码的最后阶段（表单提交）推入异步进程中。这样，样式和验证“进程”将完成，样式更改将立即生效，并且表单提交将在此之后的某个时刻发生。

我使用setTimeout()来管理这个异步进程。

elem.observe('click', function(e) {
    // [Disabled styles]
    // [Form Validity]
    if (!valid) {
        // [Reverse Button Disabling]
    } else {
        setTimeout(function(){ $('myform').submit(); }, 0);
    }
});

- Dan Hanly

Answer 2

你尝试过先停止事件吗？（如果你的按钮实际上是type="submit"）例如：

elem.observe('click', function(e) {
    e.stop(); // prevent the default actions

    // [Disabled styles]
    // [Form Validity]

    if (!valid) {
        // [Reverse Button Disabling]
    } else {
        $('myform').submit();
    }
});

- epoch