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

Question

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

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

我尝试将 '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>

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

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

Javascript create async function without breaking the application

javascript

asynchronous

asynchronous-javascript