Остановка рекурсивного setTimeout

Есть таймер с рекурсией, мне его нужно остановить на определённом моменте, но он продолжает считать дальше.

Пытался if(i>stop) clearTimeout(rec); засунуть внутрь в начало, в конец, вынести за пределы - ничего не помогает..

Что делать?

Код:

var i = 0;
var stop = 10;
var rec = setTimeout(function recFun() {
    i++;
    console.info(i);                
    rec = setTimeout(recFun, 300);
}, 300);
if(i>stop) {
    clearTimeout(rec);
}