Question

我的问题是我想获得ajax请求的总时间.. 我的意思是当我点击按钮然后发出ajax请求并启动计时器并在按钮标题中存储时间，在ajax请求成功停止计时器后...

我的问题是

当我点击按钮调用ajax请求并在ajax请求成功之后然后定时器启动。

我想要什么

我想在ajax请求之前启动计时器并在ajax请求成功之后停止

我的HTML代码

<input class="btn green start_timer" value="Sync" name="btn" type="button">

我的js代码

$(document).ready(function () {
    var setTimer = null;
    $("body").on('click', '.start_timer', function () {
        var obj = $(this);
        var start = 1;
        setTimer = setInterval(function () {
            start++;
            obj.val(start);
        }, 1000);

        $.ajax({
            type: "POST",
            url: base_url + "timerstart/start/1325",
            async: false,
            success: function (data) {
                clearInterval(setTimer);
            }
        });
        return false
    });
});

Answer 1

您的ajax请求选项中有async=false。这使得您的请求同步，因此执行脚本＆＃34;挂起＆＃34;直到请求回来并回复。你永远不应该使用async是假的。

Answer 2

您可以使用jQuery Global Ajax Event Handlers

<强>步骤：

使用ajaxSend触发计时器。

一个。显示叠加。
湾启动计时器功能。使用Interval每秒更新一次计时器。
使用ajaxComplete停止计时器。

一个。您可以使用ClearInterval来停止计时器。
计算在叠加关闭后要显示该值的差异。

备注：

请注意，当任何时刻只有一次ajax调用时，上述全局事件将按预期工作。

您需要使用全局变量从全局事件中获取值并计算差异。

Answer 3

尝试以下更新：

<script>
    $(document).ready(function () {
        var setTimer = null;
        $("body").on('click', '.start_timer', function () {
            StartDispalyingTimer($(this));
        });
        RunAjax = function (ele){
            $.ajax({
                type: "POST",
                async:true,
                url: "index2.php",
                success: function (data) {clearInterval(setTimer);},
                error: function (data) {clearInterval(setTimer);}
            });
        }
        StartDispalyingTimer = function (ele){var start = 1;
            setTimer = setInterval(function () {start++;ele.val((start-1));}, 1000);
            setTimeout(function(){RunAjax(ele);},1000);
        }
    });
  </script>

Answer 4

试试这个，它对我有用

$(document).ready(function () {
    var setTimer = null;

    $("body").on('click', '.start_timer', function () {
        var element = $(this);
        displayTimer(element);
    });

    function getData(element){
        $.ajax({
            type: "GET",
            async:true,
            url: "",
            success: function (data) {
               clearInterval(setTimer);
               element.val("Sync");
            },
            error: function (data) {
                 clearInterval(setTimer);
                 element.val("Sync");
            }
        });
    }


    function displayTimer(element){
        var start = 1;
        setTimer = setInterval(function () {
            start++;
            element.val(start);
        }, 1000);

        setTimeout(function(){
            getData(element);
        },2000);
    }
});

如何在jquery中为ajax请求制作计时器

4 个答案: