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

【问题标题】：Wait For Timer To Finish Before Function Runs在函数运行之前等待计时器完成
【发布时间】：2011-05-03 18:36:07
【问题描述】：

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

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

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

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

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

希望所有这些都是有意义的，非常感谢您的宝贵时间。

克里斯

【问题讨论】：

您是否尝试在 ajax 请求的开头和结尾设置一些 css？ jQuery ajax 函数上有一些事件，您可以使用这些事件来执行此操作。
@Nicky Waites 我在发送 ajax 函数时更改了 css，然后在响应返回时将它们改回原来的状态。但是因为响应太快了，看起来很糟糕，所以我想确保在样式更改之间至少有第二个间隔。
— 如果您只是想避免闪烁，请尝试使用.fadeIn() 和.fadeOut()（或其他动画），而不是使用.hide()、.show() 或.css() 进行突然变化。动画支持排队，这样一个动画在最后一个动画完成之前不会开始。
看起来 Ben 设法为您提供了答案 :) 还有一些全局事件可供您使用，例如，如果您想要多个 ajax 请求的通用等待消息 - api.jquery.com/ajaxStart

标签： javascript jquery timer intervals

【解决方案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);
    }
};

【讨论】：

+1。由于我们有异步方法 (AJAX)，因此不需要计时器。

【解决方案2】：

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

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

【讨论】：