在 setTimeout() 处显示特定的 <div> 内容答案

【问题标题】：Display a specific <div> content at setTimeout()在 setTimeout() 处显示特定的 <div> 内容
【发布时间】：2020-10-06 21:32:23
【问题描述】：

在下面的代码中，我使用setTimeout() 对我的后端 node.js 应用程序进行 API 调用，它每 5 秒调用一次 AJAX。在我的 AJAX 成功中，我根据应至少执行一次的特定条件显示 divContent1 和 divContent2。之后，在每个 setTimeout() 调用中应该只有 divContent2 可见。

index.html

<script type="text/javascript">
$(document).ready(function(){         
    $.ajax({
             url: "http://localhost:8070/api/route1",
             type: 'POST',
             dataType:'json',                                         
             success: function(res) {
                 //Some Task               

            }
        });   
    $("#myButton").click(function(){
        const route2 = function() {
        $.ajax({
            url: "http://localhost:8070/api/route2",
            type: "POST",
            dataType: "json",
            data: { var1: val1 },
            success: function (res) { 

            // Various tasks
            if(res.flag){
                $("#divContent1").hide();
                $("#divContent2").show();
            }
            else{
                $("#divContent1").show();
            }

            //Functions that handle div content data

            },
            beforeSend: function() {
                $("#divContent1").hide(); 
                $("#divContent2").hide();
            },
            complete: function() {
                setTimeout(route2,5000);
            },
        });
    };
    $(function(){
        route2();
    })
    });
});                
</script>

setTimeout() 调用整个route2 函数，该函数处理div 内容的所有显示和插入。但是，要求仅显示第二次通话中的divContent2。

为此寻找解决方案

【问题讨论】：

标签： javascript jquery ajax settimeout setinterval

【解决方案1】：

setTimeout() 调用整个 route2 函数来处理所有 div内容的显示和插入。但是，要求只是显示第二次调用的 divContent2。

您正在使用setTimeout(route2,5000); 在complete 下递归调用route2。所以这将无限运行，因为每次 ajax 调用完成时都会发生complete（success 或error）。所以你可以做的是创建一个计时器并在第二次执行后将其清除，如下所示：

   var ctr = 0, timer =0;
   const route2 = function() {
    $.ajax({
        ...
        success: function (res) { 
         //Write you logic based on ctr
        }
        complete: function() {
            if(ctr>0){
              clearTimeout(timer)
            }else{
              timer = setTimeout(route2,5000);
              ctr = ctr+ 1;
            }

        },
     });
   };

【讨论】：

【解决方案2】：

一个外部变量就足够了吗？只需在外部上下文中定义它并设置/检查它以选择行为：

// before declaring button click handler
var requestDoneAtLeastOnce = false;

// ...
// somewhere in success handler
success: function (res) {
    if (!requestDoneAtLeastOnce) {
        requestDoneAtLeastOnce = true;
        // do something that belongs only to handling the first response
    }
    else {
        // this is at least the second request, the other set of commands belongs here
    }
}

【讨论】：