Safari 在表单提交期间不更新 UI

Question

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

我的函数的第一步是禁用它（以防止多次点击）并应用一个 class 来更好地说明它已被禁用。我还将文本更改为 'Please Wait...'

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

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

这一切基本上发生在同一个过程中。

我发现正在发生的事情是，在 Safari 中，过程的第一阶段（按钮样式）几乎被忽略了。进一步挖掘后，我意识到它是工作，但 UI 直到过程完成后才重新绘制。这里的问题是该过程的完成是从页面重定向，因此用户永远看不到 'Please wait...'

然后我研究了为什么 Safari 不重绘 UI 并且我发现了一些解决方法，下面是一个这样的例子：

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

我尝试的另一个方法是故意隐藏和显示元素 before/after 使用 Prototype 的更新（这是系统上的主要 JavaScript 库）：

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();

None 这些项目将起作用。该过程直到完成后才会更新 UI，并且用户已重定向。作为参考，这是一个非常密集的表单，在提交过程中需要几秒钟的处理时间，所以这是一个用户体验噩梦。

有没有人遇到过这种情况？

Answer 1

我已经弄明白了。

由于这在技术上是一种解决方法，而不是问题的解决方案，我仍然愿意接受可能彻底解决问题的其他答案。

我考虑了这个 'process' 术语，以及如何有效地结束流程 - 从而应用样式，并开始另一个样式来提交表单。

我想出来的方法是将代码的最后阶段（表单提交）推入异步过程。这样，样式和验证 'process' 将完成，样式更改立即生效，表单提交将在这之后的某个时间点发生。

我用 setTimeout()

管理这个异步过程

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

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();
    }
});

Safari 在表单提交期间不更新 UI

Safari Not Updating UI During Form Submission

javascript

forms

safari

prototypejs