如何在jquery中为ajax请求制作定时器 - how to make timer for ajax request in jquery

how to make timer for ajax request in jquery

本文关键字：请求定时器 ajax 中为 jquery | 更新日期: 2023-09-27

我的问题是我想获得ajax请求的总时间。我的意思是，当我点击按钮，然后使ajax请求和启动定时器和存储时间在按钮标题，ajax请求成功后停止定时器…

我的问题是

当我点击按钮调用ajax请求，ajax请求成功后，计时器开始。

What i want

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

My html code

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

你可以使用jQuery全局Ajax事件处理程序

步骤:

使用ajaxSend触发定时器

。显示叠加。
b.开启定时器功能。
使用ajaxComplete停止定时器

。你可以使用ClearInterval来停止定时器
计算差异，如果你想在覆盖关闭后显示该值。

指出:

请注意，当任何时刻只有一个ajax调用时，上述全局事件将按预期工作。
您需要使用全局变量从全局事件中获取值并计算差异。

试试这个，它对我有效

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

尝试下面更新:

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

您已经在ajax请求的选项中获得了async=false。这使得您的请求是同步的，因此脚本的执行将"挂起"，直到请求带着响应返回。你不应该使用async is false