Консолидация функций таймаута javascript

Question

Извините за базовый уровень вопроса, но js определенно не является моей областью знаний. Тем не менее, это один из тех вопросов, на которые Google трудно ответить.

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

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

событий связывания

$(window).on("resize", resizeText); 
    $(window).on("resize", resizeIndicator); 

Функции

function resizeIndicator() { 
    clearTimeout(id); 
    id = setTimeout(updateIndicator, 200); 
} 

function resizeText() { 
    clearTimeout(id); 
    id = setTimeout(updateText, 200); 
} 

Thse не дублируется, но для полноты:

function updateIndicator() { 
    $tab = $(".tabs li.focus"); 

    if ($tab.length) { 
     toggleIndicator($tab, true); 
    } 
} 

function updateText() { 
    $tabs = $(".tabs li:not(.indicator) a"); 

    $tabs.each(function() { 
     $(this).toggleClass("two-line", this.scrollWidth > $(this).outerWidth()); 
    }); 
} 

Answer 1

Объявить свой тайм-аут идентификатор глобально и использование одиночный обработчик.

Работа демо: http://jsbin.com/nugutujoli/1/edit?js,console,output

$(window).on("resize", resizeEvent); 

var timeout; 
function resizeEvent() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function(){ 
     updateIndicator(); 
     updateText(); 
    }, 200); 
} 


function updateIndicator() { 
    console.log("update indicator fired."); 
} 

function updateText() { 
    console.log("update text fired."); 
} 

Answer 2

Итак, вы хотите, чтобы избежать дублирования кода? Нет проблем использовать более высокий порядок функции для создания новой функции.

function createResizeCallback(resizeFunc) { 
 
    var id; 
 
    
 
    return function() { 
 
    clearTimeout(id); 
 
    id = setTimeout(resizeFunc, 200); 
 
    } 
 
} 
 

 

 
$(window).on("resize", createResizeCallback(updateText)); 
 
$(window).on("resize", createResizeCallback(updateIndicator)); 
 

 

 
function updateIndicator() { 
 
    console.log('updateIndicator'); 
 
} 
 

 
function updateText() { 
 
    console.log('updateText'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>