在函数运行之前等待计时器完成

Question

我认为这是相当基本的，但我似乎无法在网上找到。这可以是 JavaScript 或 jquery。

我需要创建一个大约 1-2 秒的计时器。 同时另一个功能是使用ajax将数据传递到服务器端php文件。当响应文本返回时，它会将其显示在页面上。

目前我正在运行 ajax 函数，该函数完成所需的时间约为 0.1 秒。但这使得页面看起来非常跳跃，因为内容改变了 css 样式，而 ajax 正在等待响应，然后在返回时返回到原始状态（希望这是有道理的）。

无论如何，为了解决这个问题，我希望该函数在显示响应文本之前检查计时器是否已结束。

目前我可以获得它的唯一方法是创建一个间隔计时器一秒钟并在完成时运行 ajax 函数，但这并不理想，因为即使向服务器发出请求，查看器也必须等待额外的一秒或 2 秒占用该时间来完成。

希望这一切都有意义非常感谢您抽出时间。

克里斯

Answer 1

您最好将函数作为“成功”处理程序附加到 AJAX 调用，而不是使用固定计时器。如何附加它取决于哪个库（如果有）：

jQuery 1.4 样式（在 1.5 中仍然有效）

$.ajax({
    // your AJAX options

    success: yourFunc
});

jQuery 1.5 样式

$.ajax({
    // your AJAX options
}).done(yourFunc);

DOM 样式

// after creating your XHR

xhr.onreadystatechange = function() {
    if (this.readyState === 4) { // 4 means the request has completed
        if (this.status !== 200) { // 200 is success, so anything else...
            // log or report error
            return;
        }

        // call your other function, which uses the AJAX data
        yourFunc(this.responseText);
    }
};

Answer 2

如果计时器是您唯一的选择，我会使用 setTimeout 或 jQuery .delay()。

$.ajax({
    success: function() {
        setTimout(function() {
            // styling code goes here
        }, 1000);
    }
});