javascript - 合并 javascript 超时函数

Question

很抱歉这个问题很基础，但 js 绝对不是我的专业领域。然而，这是很难通过 Google 找到答案的问题之一。

我基本上想在调整窗口大小时做几件事。我有一些额外的代码也可以停止触发两次调整大小事件。

问题是我在复制一些代码，作为一名编码员，我知道这是错误的。问题是我不知道如何去做正确的事。这是我当前的重复代码:

事件绑定(bind)

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

函数

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

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

这些没有重复，但为了完整性而包括在内:

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

所以你想避免代码重复？使用高阶函数创建新函数没问题。

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>