Javascript 在不破坏应用程序的情况下创建异步函数答案

【问题标题】：Javascript create async function without breaking the applicationJavascript 在不破坏应用程序的情况下创建异步函数
【发布时间】：2021-02-02 13:21:23
【问题描述】：

我有一个项目，其中有一个溢出的水平条。在开头和结尾有移动溢出位置的按钮。此时用户必须单击按钮才能移动溢出。

我不想创建当悬停在它们上方时会不断移动溢出直到到达终点或用户从按钮上移开鼠标的按钮。代码

我尝试将“oclick”更改为“onmouseover”并使函数异步。然后添加第二个“onmouseout”功能。但我不断循环，网络应用程序中断。

let isHovered = false;

async function scollTopBar(direction) {
      var parent = document.getElementById("parent");
      isHovered = true;
      let amount = 1;
      while(isHovered){
         if (direction === "left") amount *= -1;
         parent.scrollLeft += amount;
         setTimeout(() => {}, 100);
      }
}

function mouseRemoved() {
      isHovered = false;
}

我没有包含上面的代码，以免破坏浏览器。

var parent = document.getElementById("parent")


function scollTopBar(direction) {
      var parent = document.getElementById("parent");
      let amount = 20;
      if (direction === "left") amount *= -1;
      parent.scrollLeft += amount;
}

.cotainer {
  width: 30rem;
  height: 3rem;
  display: flex;
  background-color: red;
}

p{
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

button {
  height: 100%;
}

.parent {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
}

.child {
  padding: 0 1rem;
  border-right: 1px solid blue;
  background-color: green;
  
  display: inline-flex;
}

<div class="cotainer">
  <button onclick="scollTopBar('left')">b</button>
  <div class="parent" id="parent">
    <div class="child">
      <p>Hello</p>
      <p>Hello</p>
    </div>
    <div class="child">
      <p>Hello World</p>
      <p>Hello</p>
    </div>
    <div class="child">
      <p>Hello WorldHelloWorld</p>
      <p>Hello</p>
    </div>
    <div class="child">
      <p>World</p>
      <p>Hello</p>
    </div>
    <div class="child">
      <p>Hello WorldHello World</p>
      <p>Hello</p>
    </div>
    <div class="child">
      <p>Hello</p>
    </div>
    <div class="child">
      <p>HelloWorld</p>
      <p>Hello</p>
    </div>
    <div class="child">
      <p>HelloWorld</p>
      <p>Hello</p>
    </div>
  </div>
  <button onclick="scollTopBar('right')">n</button>
</div>

【问题讨论】：

您的 setTimeout 调用什么也不做。你可以消除这个。但是你应该使用 setTimeout 或 setInterval 来做你的动画，而不是 while 循环。使用while 不是制作动画的正确方法，并且几乎在所有情况下都会导致无限循环。
另外，请注意 jQuery 有动画功能，可以做你想做的事。
@ControlAltDel 我没有使用 Jquery。我正在创建一个 Vue 项目。所以我想用普通的javascript来做。

标签： javascript asynchronous asynchronous-javascript

【解决方案1】：

在 vanilla JS 中，你应该有这样的东西，左右是按钮 --->

let left = document.getElementById("left");
  let right = document.getElementById("right");

  left.onmouseover = () => {
    scrollTopBar(-20);
  };
  right.onmouseover = () => {
    scrollTopBar(20);
  };

  function scrollTopBar(direction) {
    var parent = document.getElementById("parent");

    let int = setInterval(() => {
      parent.scrollLeft += direction;
    }, 100);

    left.onmouseout = () => {
      clearInterval(int);
    };
    right.onmouseout = () => {
      clearInterval(int);
    };
  }

【讨论】：