如何正确组合这些脚本？

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

当你的动画是运行;

时，也许使用一个标志来阻止 "blurring"

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

似乎出于某种原因，即使动画已完成，"scroll" 事件仍在发送。所以基于这个答案我使用了一个承诺，但我仍然需要一个 setTimeout 来给 "scroll" 时间来结束。

$("#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);

#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">
</div>

如何正确组合这些脚本？

How to combine this scripts correctly?

javascript

scroll

focus