Почему я получаю «X не функция» в следующей рекурсивной функции?

Question

Я использую следующий код, чтобы анимировать непрозрачность элемента:

 var opacity = 0 // starting opacity 
     var step = 0.1 // step size 
     var target = 1 // target value 
     var time = 50 // delay in milliseconds 
     // start timer loop, and record it's index 
     var increaseOpacity = setInterval(function() { 
     // assuming your selector works, set opacity 
     $(`#pano-${index}`).attr({ opacity: opacity }) 
     // increment opacity by step size 
     opacity += step 
     // if we reached our target value, stop the timer 
     if (opacity >= target) { 
      clearInterval(increaseOpacity) 
     } 
     }, time) 

     $('.pano').attr({ opacity: 0 }) 
     increaseOpacity() 

Он работает. Тем не менее, я получаю Uncaught TypeError: increaseOpacity is not a function каждый раз, когда я запускаю функцию.

Почему это и как его исправить?

Answer 1

However, I get Uncaught TypeError: increaseOpacity is not a function every time I run the function.

increaseOpacity не является функцией объекта, он является идентификатором для таймера, так что clearInterval может остановка и ясно таймер позже.

Why is this and how to fix it?

Вы можете просто удалить этот вызов функции, поскольку она будет автоматически вызываться setInterval методом.

Answer 2

setInterval возвращает индекс интервала, а не функцию.

var increaseOpacity = function() { 
    // ... 
    if (opacity >= target) { 
    clearInterval(increaseOpacityInterval); 
    } 
}; 

var increaseOpacityInterval = setInterval(increaseOpacity); 

Answer 3

Что вы делаете, просто помещая setInterval в к вару , который означает, что вы определение вара помнить функция Времени выполнения

нет необходимости называть его причиной он выполняет какой-либо способ по потоку вашего кода то, что вы можете использовать в своем новом var growthOpacity в будущем, - это очистить эту функцию setInterval, если вы хотите ее отключить ......

, если вы хотите, чтобы этот шаг назывался функция все, что вам нужно сделать, это

var increaseOpacity = function(){ 
    var SomeNewVarForInterval = setInterval(function() { 
    // assuming your selector works, set opacity 
    $(`#pano-${index}`).attr({ opacity: opacity }) 
    // increment opacity by step size 
    opacity += step 
    // if we reached our target value, stop the timer 
    if (opacity >= target) { 
     clearInterval(SomeNewVarForInterval) 
    } 
    }, time) 
} 

предпочтительно, чтобы вы все еще помните setInterval в вар, если вы хотите, чтобы очистить его где-нибудь в будущем