Question

我有以下功能，在我的程序中调用一次。当没有用户交互时，它会在打印出阵列时通过递归一次又一次地重新开始。但是当用户点击链接时，应首先停止该功能（不再从该阵列输出），然后使用新参数再次启动。

function getText(mode){

        var para = mode;
        var url = "getText.php?mode=" + para;

        var arr = new Array();

        //get array via ajax-request

        var $div = $('#text_wrapper');

        $.each(arr, function(index, value){  
            eachID = setTimeout(function(){
                    $div.html(value).stop(true, true).fadeIn().delay(5000).fadeOut();
                    if(index == (arr.length-1)){
                        clearTimeout(eachID);
                        getText(para);
                    }
            }, 6000 * index); 
        });
    }

我的代码并没有真正停止该功能，而是再次调用它。这最终导致多个输出并相互叠加。如何确保该功能一次停止并运行一次？

$(document).ready(function() {
    $("#div1, #div2").click(function(e){
        e.preventDefault();
        var select = $(this).attr("id");
        clearTimeout(eachID);

        getText(select);
    });
});

Answer 1

您会使用最新的eachID覆盖setTimeout，因此当您clearTimeout(eachID)时，您只会停止最后一次。{/ p>

就个人而言，我喜欢这样做：

id = 0;
timer = setInterval(function() {
    // do stuff with arr[id]
    id++;
    if( id >= arr.length) clearInterval(timer);
},6000);

这样，您只有一个计时器在运行，您可以随时清除它。

停止递归并重新开始

1 个答案: