除非有时将元素悬停在inspect内，否则有时会用Javascript加载HTML内容 [英] Javascript to load content in HTML sometimes unless element hovered inside inspect

问题描述

我做了一个小部件。其内容由JS动态加载。
但是，有时在页面加载时，除非单击数据，否则数据不会显示在窗口小部件上。即使进入检查并将鼠标悬停在任何元素上也会加载项目。下面的两个图像分别是单击前后的。

更新1 -单击不一定加载数据，但是将鼠标悬停在inspect元素内。

更新2 -如果我多次调用该函数来放置数据，则此问题似乎已解决。注意：我有15秒的计时器来调用该函数，但是，如果我减小了前4次运行的间隔，它会修复。但是，这似乎是一种解决方法，而不是解决方案。

更新3 -正如建议的那样，这似乎更多是css问题
创建了

这里是放置数据的功能

 函数putData（dataSet）{
 if（dataSet.length == 3）{
 document.getElementById（'liveBlock '）.style.display ='none'; 
 document.getElementById（’upcomingCompletedBlock’）。style.display =‘block’; 
 for（var i = 1; i <= 3; i ++）{
 title = dataSet [i-1] .title; 
队= title.split（’vs’）; 
 homeTeamName =球队[0]; 
 awayTeamName =球队[1]; 
 homeTeam = dataSet [i-1] .homeTeamLogoUrl; 
 awayTeam = dataSet [i-1] .awayTeamLogoUrl; 
 document.getElementById（'botCupLogo'+ i +'1'）。src = homeTeam; 
 document.getElementById（'botCupLogo'+ i +'2'）。src = awayTeam; 
 document.getElementById（'botCupName'+ i +'1'）。innerHTML = homeTeamName; 
 document.getElementById（'botCupName'+ i +'2'）。innerHTML = awayTeamName; 
 
 if（dataSet [i-1] .matchStatus =='UPCOMING'）{
 var date = new Date（dataSet [i-1] .startDateTime）; 
 document.getElementById（’summaryText’+ i）.innerHTML =日期； 
} 
 else if（dataSet [i-1] .matchStatus =='COMPLETED'）{
 document.getElementById（'summaryText'+ i）.innerHTML = dataSet [i-1] .summaryText; 
} 
} 
} 
  

从API提取数据的函数。数据已正确获取并传递到此函数中。

解决方案

我制作了一个小部件。

您是说要通过JS添加HTML内容吗？我敢打赌，这里存在协调问题。也许添加此内容的函数称为 createContent ，在 putData 函数之后触发一次或多次，然后覆盖DOM元素恢复为其初始值。也许 putData 提前触发并且元素未加载。

如果我多次调用该函数来放置数据，则该问题将得到解决。

其中支持协调问题假设。

建议

• 包装您的 putData 函数内容包含在 try catch 中。

  
  
  

  由于您正在处理无法加载或定位的DOM元素，因此可以防止JS崩溃。像这样的东西：

  function putData（dataSet）{
尝试{
 //在此处添加代码
返回true; 
} catch（reason）{
 console.error（reason）; //<-注意控制台
 return false; 
} 
} 
  

• 不要多次随机调用 putData 。而是在HTML内容准备就绪时调用它。

  
  
  

  例如，在 createContent 的末尾，您可以调用该函数先获取数据，然后获取 putData 及其响应。另一种选择是使用自定义事件，并将其分派到 createContent 的末尾。




• 建议的函数 createContent ，检查内容是否已加载。而且，如果 isLoaded ，则不要再次加载。

希望对您有所帮助。

I have made a widget. The content of this is loaded dynamically by JS. However, sometimes when a page loads the data does not show up on the widget unless it is clicked upon. Even going into inspect and hovering over any element loads the items. The two images below are before and after click.

Update 1- Click doesn't necessarily loads the data but hovering inside inspect element does.

Update 2 - This seem to get fixed if I call the function to put data multiple times. Note: I have 15 sec timer to call the function, however if I reduce the interval of first 4 runs, it fixes. However, this seems like a workaround and not a solution.

Update 3 - As Suggested, this appears more of a css issue Created a Fiddle

Here is the function that is putting the data

function putData(dataSet) {
if(dataSet.length == 3) {
    document.getElementById('liveBlock').style.display = 'none';
    document.getElementById('upcomingCompletedBlock').style.display = 'block';
    for(var i=1; i<=3; i++) {
        title = dataSet[i-1].title;
        teams = title.split(' vs ');
        homeTeamName = teams[0];
        awayTeamName = teams[1];
        homeTeam = dataSet[i-1].homeTeamLogoUrl;
        awayTeam = dataSet[i-1].awayTeamLogoUrl;
        document.getElementById('botCupLogo'+i+'1').src=homeTeam;
        document.getElementById('botCupLogo'+i+'2').src=awayTeam;
        document.getElementById('botCupName'+i+'1').innerHTML=homeTeamName;
        document.getElementById('botCupName'+i+'2').innerHTML=awayTeamName;

        if(dataSet[i-1].matchStatus == 'UPCOMING') {
            var date = new Date(dataSet[i-1].startDateTime);
            document.getElementById('summaryText'+i).innerHTML = date;
        }
        else if(dataSet[i-1].matchStatus == 'COMPLETED') {
            document.getElementById('summaryText'+i).innerHTML = dataSet[i-1].summaryText;
        }
    }
}

It is called by a different function which fetches data from an API. The data is correctly fetched and passed into this function

解决方案

I have made a widget. The content of this is loaded dynamically by JS.

Do you mean you add the HTML content by JS? I bet that there is a coordination issue. Maybe the function that adds this content, call it createContent, fires one or more times after your putData function, and overwrites the DOM elements to their initial values. Or maybe putData fires early and the elements are not loaded.

This seem to get fixed if I call the function to put data multiple times.

Which supports the coordination issue hypothesis.

Advices

• Wrap your putData function content in a try catch. It will prevent your JS from crash and will help you to debugging.

  Since you are manipulating DOM elements that could not be loaded or targeted. Something like this:

function putData(dataSet) {
    try {
        // add your code here
        return true;
    } catch (reason) {
        console.error(reason); // <-- pay attention to the console
        return false;
    }
}

• Do not call the putData multiple times ramdomly. Instead, call it when the HTML content is ready.

  For example, at the end of createContent you can call the function that fetches the data and then putData with its response. Another option is to use a custom event and dispatch it at the end of createContent.

• Inside the proposed function createContent, check if content is alreadty loaded. And if isLoaded, do not load it again.

Hope it helps.

这篇关于除非有时将元素悬停在inspect内，否则有时会用Javascript加载HTML内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！