Javascript clearInterval 仅适用于页面上的一个 setInterval

Question

在一个对象（程序集）中我有两个属性（检查和 blipbg）

我为它们中的每一个触发了 2 个 setInterval。

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

clearInterval(assembly.blipinterval);不起作用，并且随机地继续运行几个周期然后停止，或者不确定地运行s。

作用域问题？但是为什么有人在工作呢？

<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

在调用 setInterval 之前，先调用 clearInterval。

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

Answer 2

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

ID是唯一的，后台运行的setInterval必须其 id清楚

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

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

Javascript clearInterval 仅适用于页面上的一个 setInterval

Javascript clearInterval works only for one setInterval on page

javascript

jquery

setinterval

clearinterval