如何正确组合这些脚本？

Question

我有2个无法并行工作的脚本。第一个用于在聚焦时滚动到搜索栏，另一个用于在滚动时移除焦点（在移动设备上移除键盘）。

有没有办法组合这些脚本，让它首先滚动到搜索栏，然后再次滚动以删除键盘时激活第二个脚本？因为现在它滚动到搜索栏然后失去焦点。

将其滚动到搜索栏：

    $("#myInput").click(function () {
    $("html, body").animate({ scrollTop: $("#osb").offset().top }, 300);
    return true;
});

再次滚动时删除焦点：

    document.addEventListener("scroll", function() {
  document.activeElement.blur();
});

谢谢！

示例：

$("#myInput").click(function() {
  document.removeEventListener("scroll", blurElement);

  $("html, body").animate({
    scrollTop: $("#b").offset().top
  }, 300, function() {
    document.addEventListener("scroll", blurElement);
  });

  return true;
});

function blurElement() {
  document.activeElement.blur();
}

document.addEventListener("scroll", blurElement);

#a {
  height: 100px;
  background: #aaa;
}

#b {
  background: #bbb;
}

#c {
  height: 1000px;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
</div>
<div id="b">
  <input type="text" id="myInput" placeholder="search.." title="">
</div>
<div id="c">
^ need this stay focused untill I scroll again
</div>

Answer 1

也许使用旗帜来防止＆＃34;模糊＆＃34;当你的动画正在运行时;

var allowBlur = true;

$("#myInput").click(function () {
    allowBlur = false;
    $("html, body").animate({ scrollTop: $("#osb").offset().top }, 300, function() {
        allowBlur = true;
    });
    return true;
});

document.addEventListener("scroll", function() {
    if(!allowBlur) return;
    document.activeElement.blur();
});

尝试＃2

$("#myInput").click(function () {
    document.removeEventListener("scroll", blurElement);

    $("html, body").animate({ scrollTop: $("#osb").offset().top }, 300, function() {
        document.addEventListener("scroll", blurElement);
    });

    return true;
});

function blurElement() {
    document.activeElement.blur();
}

document.addEventListener("scroll", blurElement);

尝试＃3

似乎由于某种原因，＆＃34;滚动＆＃34;即使动画完成，事件仍在发送。所以基于这个答案https://stackoverflow.com/a/8791175/1819684我使用了一个承诺，但我仍然需要一个setTimeout来提供＆＃34;滚动＆＃34;时间到了。

＆＃13;

＆＃13;

$("#myInput").click(function() {
  document.removeEventListener("scroll", blurElement);

  $("html, body").animate({
    scrollTop: $("#b").offset().top
  }, 300).promise().done(function() {
    setTimeout(function() {
      document.addEventListener("scroll", blurElement)
    }, 100);
  });

  return true;
});

function blurElement() {
  document.activeElement.blur();
}

document.addEventListener("scroll", blurElement);

＆＃13;

#a {
  height: 100px;
  background: #aaa;
}

#b {
  background: #bbb;
}

#c {
  height: 1000px;
  background: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
</div>
<div id="b">
  <input type="text" id="myInput" placeholder="search.." title="">
</div>
<div id="c">
</div>

＆＃13;

＆＃13;

＆＃13;