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);
}

这些不重复，但为了完整性而包括在内：

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

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

＆＃13;

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');
}

＆＃13;

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

＆＃13;

Answer 2

全局声明您的超时ID并使用单个处理程序。

工作演示：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.");
}

合并javascript超时功能

2 个答案: