javascript - 在悬停在另一个 div 上时显示一个 div 会导致对服务器的多个请求和闪烁

Question

我试图让一个 div 在悬停时 float 在另一个 div 旁边。我的 div 基本上就像一个网格，几个 div 彼此相邻放置。下面是我的 fiddle 。

http://jsfiddle.net/dfe2t1ha/3/

我使用的是纯 javascript，我基本上想在悬停时显示另一个 div div2 float 在 div1 旁边。

例如:

<div class="div1" onmouseover=getDetails()>

  </div>
  <div class="div2">

  </div>

function getDetails() {
 let html ="";
  return fetch('https://www.google.com')
  .then((response)=> {
    response.json().then((data) => {
      html += `
    <div>Hello world</div>

      `;
      document.getElementsByClassName("div2")[index].innerHTML = html;
      document.getElementsByClassName("div2")[index].style.display = "block";

    });

  });
}

但是当我尝试在 div2 上显示 display: block 时，我看到它对服务器发出多个请求调用并多次获取 url，我看到闪烁在悬停上。我相信它是因为它对服务器进行了几次调用我不确定问题到底出在哪里。有没有办法用 css 或它的 js 问题解决这个问题？

谢谢!

Answer 1

这里是你如何做到的:

window.requestInProgress = false;
document.getElementById('targetHoverComponent').addEventListener('mouseover', () => {
	if (window.requestInProgess !== true) {
  	document.getElementById('targetConentComponent').innerHTML='Loading....';
    getDetailsAsync().then((bio) => {
    	document.getElementById('targetConentComponent').innerHTML=bio; //Do make sure to get it checked for xss attacks.
    });
  }
});

async function getDetailsAsync() {
	console.log('inside async');
  window.requestInProgress = true;
  const response = await fetch(`https://api.github.com/users/saurabhnemade`);
  const jsonResponse = await response.json();
  //console.log(jsonResponse.bio);
  window.requestInProgress = false;
  return await jsonResponse.bio;
}

.search-component-row-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.search-component {
  padding: 10px;
}

.criteria {
  padding: 10px;
  display: flex;
  align-items: center;
}

.criteria-onhover {
  display: none;
}

.criteria:hover ~.criteria-onhover{
  display: block;
}

<div class="search-component">
          <div class="search-component-row-container">
              <div class="criteria" id="targetHoverComponent">
                Div on which hover is required
              </div>
              <div class="criteria-onhover" id="targetConentComponent">
                Hidden Div Contents which appears on hover
              </div>
          </div>
</div>

链接到工作 fiddle : https://jsfiddle.net/j05mg1xy/3/