JavascriptclearInterval仅适用于页面上的一个setInterval

Question

在对象(程序集)中，我有两个属性(check 和 blipbg)

我为其中每一个触发 2 个 setInterval。

当我对每一个调用clearInterval时，只有一个有效:clearInterval( assembly.checkinterval);

clearInterval(程序集.blipinterval);不起作用，并且随机地继续运行几个周期然后停止，或者无限期地运行。

范围问题？但为什么还要工作呢？

<script>
    $(document).ready(function () {

        var zipli = $('.zipli');
        var actionlink = $('.actionlink');
        var zip_asset_url = $('.asseturl');
        var csrftoken = '{{ csrf_token }}';
        var zip_status_url = $('.statusurl');


        zipli.on("click", function(e){
            e.preventDefault();

            zipli.html('<a href="" class="waitlink">Demande de création de fichier zip - Ne fermez pas la fenêtre');
            zipli.addClass('disabled');

            assembly.order();

        });


        assembly = {};

        assembly.order = function(){
            $.ajax({
                context: this,
                url: zip_asset_url,
                type : "POST",
                data: {csrfmiddlewaretoken: csrftoken},
                success: function (resp) {

                    assembly_url = resp.assembly_url;

                    zipli.html('<a href="" class="waitlink">Fichier zip en cours de création - Ne fermez pas la fenêtre');
                    waitlink =  $('.waitlink');

                    assembly.checkinterval = setInterval(assembly.check,1000);
                    assembly.blipinterval = setInterval(assembly.blipbg,1000);

                    console.log("assembly.order success"+resp);
                },
                error:function(resp){
                    $('.waitlink').html("Erreur lors de la demande de création d'archive - Rechargez la page ?");
                    console.log("assemby.order error"+resp);
                }
            });
        };

        assembly.blipbg = function (){
            $('.zipli a').animate({'color': '#eee'}, 500).animate({'color': '#999'}, 500);
        };

        assembly.check = function(){

            $.ajax({
                context: this,
                url: zip_status_url,
                type : "POST", // http method
                data: {assembly_url:assembly_url,csrfmiddlewaretoken: csrftoken},
                success: function (resp) {

                    if (resp.ok == "ASSEMBLY_COMPLETED"){
                        clearInterval(assembly.checkinterval);
                        clearInterval(assembly.blipinterval);

                        zipli.remove();
                        $('.zipul').html('<li class="pull-right"><a href="" class="finallink"> Fichier zip prêt : Téléchargez</a></li>');
                        $('.finallink').attr("href",resp.results.archive[0].ssl_url);

                    }
                    else if (resp.error){
                        console.log("assembly.check resp.error error : %o", resp);
                        clearInterval(assembly.checkinterval);
                        clearInterval(assembly.blipinterval);

                        $('.waitlink').html("Erreur lors de la préparation de l'archive : "+resp.error).animate({'color': 'red'}, 300);

                    }else{
                        console.log("zipnoready");
                    }

                },
                error:function(resp){
                    $('.waitlink').html("Erreur lors de la vérification du process: %o", resp);

                }
            });
        }

    });
</script>

Answer 1

在这种情况下，这可能不是范围问题，而是引用 ID 被对 order() 的多次调用覆盖。

ID 是唯一的，在后台运行的 setInterval 必须具有明确的 ID。

如果调用 order()，则存在旧 ID 被覆盖的风险，因此 ClearInterval 只会清除最有原因的计时器，而旧 ID 仍将运行。

考虑使用回调来避免这种情况。