id=setInterval() is first undefined than 3 (Uses Jquery)

I would like to have a counter, that counts backwards, and is stopped if the user filled the input-field.

Unfortunately the counter does not stop - I tried to read the counter ID on many places of the code and can't see the logic where it changes the value (Probably I have a wrong idea how SetInterval() and clearInterval() works ...

The relevant part of the code:

$(document).ready(function() {
    var counter=0;
    function hole_erste_Frage(aktuelle_div, nr){
     $.ajax({
        url: 'gnkid.php',
        data: 'sectionid='+sectionid+'&nr='+nr,
        success: function(data)          
        {
          if ($('.dbantwort').eq(aktuelle_div).val().length>0) {
            console.log(counter); // "0"
            counter = start_counter($('.dbantwort').eq(aktuelle_div).val().length*2+5);
            console.log(counter); // "undefined" - WHY????
          }
        }
     });
    }
    hole_erste_Frage(aktuelle_div,aktuelle_div);
    function start_counter(count) {
        console.log(counter); // 1. call: "undefined" - 2. call: "3" !!! - Why 3??
        if (count<3) {count=3};
        var cnt=count*10;
        counter = setInterval(function() {
          console.log(counter); // still "undefined" than "3"
          if (cnt >= 0) {
                var sek=Math.floor(cnt/10);
                var zsek=cnt/10;
                if (sek<5){
                    $('#displayCounter').html(zsek);
                } else {
                    $('#displayCounter').html(sek);
                }
                cnt--;
                return_prevent--;
                question_time=question_time+100;
            }
            else {
                console.log(counter); // "undefined" - "3"            
                stop_counter(counter,'Timeout!!');                
            }
        }, 100);
        console.log(counter); // and still "undefined" - I don't understand!
     }
function stop_counter(cter,bool){
    clearInterval(counter);  // I think here is the problem, because when it is called the first time the variable "counter" seems to be "undefined"
    if (bool!='') {$('#displayCounter').html(bool);}
}
function press_send(){ // This one is called after the user pressed "return"
    stop_counter(counter); // Here is the problem - it does not stop "undefined" - and "3"
    if (check_answer()) {
        $('.Abfrage-Box').eq(aktuelle_div).toggle();
        check_answer_sql($('.antwort').eq(aktuelle_div).val(),$('.kid').eq(aktuelle_div).val(),aktuelle_div, question_time, true);
        aktuelle_div = (aktuelle_div>=anzahl_abfrageboxen-1) ? 0 : aktuelle_div+1;
    开发者_开发百科    $('.Abfrage-Box').eq(aktuelle_div).toggle();
        $('.antwort').eq(aktuelle_div).focus();
        if ($('.dbantwort').eq(aktuelle_div).val().length>0) {
            console.log(counter);
            start_counter($('.dbantwort').eq(aktuelle_div).val().length*2+5);
            console.log(counter);
        }

    } else {
        check_answer_sql($('.antwort').eq(aktuelle_div).val(),$('.kid').eq(aktuelle_div).val(),aktuelle_div, question_time, false);
        $('.antwort').eq(aktuelle_div).css('backgroundColor','red');
        $('.richtige_antwort').eq(aktuelle_div).toggle();
    }

}

---

Looks like you're assigning different values to counter...

I'd suggest adding a new variable outside of the functions, say gCounterTimer. Whenever you call setInterval(...) assign it to this new variable, i.e.:

gCounterInterval = setInterval(...)

And then when you need to clear it use:

clearInterval(gCounterInterval)

So your code would look like this:

var gCounterInterval;

$(document).ready(function() {
    var counter=0;
    function hole_erste_Frage(aktuelle_div, nr){
     $.ajax({
        url: 'gnkid.php',
        data: 'sectionid='+sectionid+'&nr='+nr,
        success: function(data)          
        {
          if ($('.dbantwort').eq(aktuelle_div).val().length>0) {
            console.log(counter); // "0"
            counter = start_counter($('.dbantwort').eq(aktuelle_div).val().length*2+5);
            console.log(counter); // "undefined" - WHY????
          }
        }
     });
    }
    hole_erste_Frage(aktuelle_div,aktuelle_div);
    function start_counter(count) {
        console.log(counter); // 1. call: "undefined" - 2. call: "3" !!! - Why 3??
        if (count<3) {count=3};
        var cnt=count*10;
        gCounterInterval = setInterval(function() {
          console.log(counter); // still "undefined" than "3"
          if (cnt >= 0) {
                var sek=Math.floor(cnt/10);
                var zsek=cnt/10;
                if (sek<5){
                    $('#displayCounter').html(zsek);
                } else {
                    $('#displayCounter').html(sek);
                }
                cnt--;
                return_prevent--;
                question_time=question_time+100;
            }
            else {
                console.log(counter); // "undefined" - "3"            
                stop_counter(counter,'Timeout!!');                
            }
        }, 100);
        console.log(counter); // and still "undefined" - I don't understand!
     }
function stop_counter(cter,bool){
    clearInterval(gCounterInterval);  // I think here is the problem, because when it is called the first time the variable "counter" seems to be "undefined"
    if (bool!='') {$('#displayCounter').html(bool);}
}
function press_send(){ // This one is called after the user pressed "return"
    stop_counter(counter); // Here is the problem - it does not stop "undefined" - and "3"
    if (check_answer()) {
        $('.Abfrage-Box').eq(aktuelle_div).toggle();
        check_answer_sql($('.antwort').eq(aktuelle_div).val(),$('.kid').eq(aktuelle_div).val(),aktuelle_div, question_time, true);
        aktuelle_div = (aktuelle_div>=anzahl_abfrageboxen-1) ? 0 : aktuelle_div+1;
        $('.Abfrage-Box').eq(aktuelle_div).toggle();
        $('.antwort').eq(aktuelle_div).focus();
        if ($('.dbantwort').eq(aktuelle_div).val().length>0) {
            console.log(counter);
            start_counter($('.dbantwort').eq(aktuelle_div).val().length*2+5);
            console.log(counter);
        }

    } else {
        check_answer_sql($('.antwort').eq(aktuelle_div).val(),$('.kid').eq(aktuelle_div).val(),aktuelle_div, question_time, false);
        $('.antwort').eq(aktuelle_div).css('backgroundColor','red');
        $('.richtige_antwort').eq(aktuelle_div).toggle();
    }

}