Странное поведение SetTimeout Javascript

Question

Следующий скрипт должен выполнить следующие действия:

На странице загрузки, он будет установлен тайм-аут в 20 секунд, а затем желаемое содержание будет обновляться в Ajax вызова автоматически. Если пользователь нажмет кнопку с надписью RELOAD, она вызовет функцию reloadContent() и тем самым очистит тайм-аут и установит ее снова.

В основном, это должно перезапустить таймаут, если пользователь вручную перезагрузился, чтобы избежать слишком близких вызовов.

Он работает наполовину, потому что таймер, кажется, сбрасывается, но reloadContentTimeout() будет выполнять через 10 секунд действия, загруженные вручную, что составляет половину таймаута.

Я что-то не так?

Спасибо!

/** 
    * Reload content 
    */ 
    function reloadContent(elementId) { 
    $(elementId).load(window.location.href+' '+elementId+' > *'); 
    clearTimeout(timeoutId); 
    reloadContentTimeout(false); 
    } 

    /** 
    * Reload content every X seconds (20) 
    */ 
    var timeoutId; 
    function reloadContentTimeout(now) 
    { 
    now = (typeof now === 'undefined' ? true : now); 
    if(now) { 
     reloadContent('#table-content'); 
    } 
    timeoutId = setTimeout(reloadContentTimeout, 1000 * 20); 
    } 
    reloadContentTimeout(false); 

Answer 1

Потому что вы называете reloadContentTimeout дважды, что переназначение timeoutId. Один из этих идентификаторов не очищается, и событие срабатывает чаще, чем нужно. Давайте разворачиваем ваш стек вызовов немного:

if (now) { 
    $(elementId).load(); 
    clearTimeout(timeoutId); 
    // this reassigns timeoutId 
    reloadContentTimeout(false) 
} 
// this is where timeoutId is assigned. It gets assigned 
// by this call, but also the call above. 
timeoutId = setTimeout(reloadContentTimeout, 1000 * 20); 

Я разрежу погоню: это решит проблему.

if (now) { 
    /* snip */ 
} 
else { 
    timeoutId = /* snip */ 
} 

Answer 2

Пожалуйста, проверьте порядок вызовов

• Каждый вызов reloadContentTimeout с запуском нового тайм-аута (для обоих возможных значений параметра «неопределенные» и «ложные»)
• После 20 секунд вы перезагрузите контент, который запустит новый тайм-аут после очистки старого (что совершенно бесполезно, потому что таймер уже запущен). И затем вы запускаете другой тайм-аут и переназначаете timeoutId, не очищая тот, который вы создали ранее. Теперь у вас есть два тайм-аута, который будет продолжаться после каждого тайм-аута.

Отметьте ответ от @Explosion Pills. Это поможет вам решить проблему.