Question

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

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

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

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

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

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

然后我探讨了为什么Safari没有重新绘制UI，我发现了一些针对此的修复，下面就是一个例子：

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

我尝试的另一个是故意隐藏并在使用Prototype（它是系统上的主要JavaScript库）更新之前/之后显示元素：

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

另一种方法是创建一个'重绘'方法来强制重绘。

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，并且用户已重定向。作为参考，这是一个非常密集的形式，在提交过程中需要几秒钟的处理，所以这是一个UX的噩梦。

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

Answer 1

我已经弄明白了。

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

我想到了这个'过程'术语，以及如何有效地结束这个过程 - 从而应用这些样式，并开始另一个提交表单。

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

我用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

2 个答案: