表单提交后Chart.js图表仅显示一秒就消失该如何解决？

1. 阻止表单默认提交行为 #

表单提交的默认逻辑会触发页面刷新，这是你的图表仅显示一秒就消失的核心原因，并不是函数执行太快导致的。修改表单事件监听代码，接收事件对象并调用preventDefault()阻止默认行为：

document.getElementById('country_form').addEventListener('submit', (e) => {
    // 新增这一行阻止页面刷新
    e.preventDefault();
    country = document.getElementById('country').value;
    console.log("test 1", country);
    graphit();
})

2. 修复异步请求等待逻辑 #

你的dataToGraph函数声明为async，但内部的fetch请求没有加await，会导致还没拿到接口返回的数据就直接返回了空数组，就算阻止了刷新也可能渲染不出正确数据。修改代码如下：

async function dataToGraph() {
    const xs = [];
    const ys = [];
    
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();
    today = yyyy + '-' + mm + '-' + dd;
    console.log("test 2", country);
    // 新增await等待请求完成再继续执行
    await fetch(`https://webhooks.mongodb-stitch.com/api/client/v2.0/app/covid-19-qppza/service/REST-API/incoming_webhook/countries_summary?country=${country}&min_date=2020-04-22&max_date=${today}`)
    .then(response => response.json())
    .then(days => {
        days.forEach(day => {
            ys.push(day.confirmed);
            xs.push(day.date);
        })
    })
    
    console.log("xs", xs);
    console.log("ys", ys);
    return { xs, ys };
};

3. 可选优化：避免重复生成图表实例 #

多次搜索不同国家时，反复在同一个canvas上生成Chart实例会出现内存泄漏和渲染异常，建议把图表实例提到外层作用域，每次生成新图表前销毁旧实例：

document.addEventListener('DOMContentLoaded', () => {
    var country = "Italy";
    // 外层声明变量存储图表实例
    let myChart = null;

    // 原有表单监听等中间代码保持不变

    async function graphit() {
        document.getElementById('myChart').style.display = "block";
        const dataset = await dataToGraph();
        
        const ctx = document.getElementById('myChart').getContext('2d');
        // 生成新图表前先销毁旧实例
        if(myChart) myChart.destroy();
        // 生成新实例赋值给外层变量
        myChart = new Chart(ctx, {
            // 原有图表配置保持不变
        });
    };
})

内容的提问来源于stack exchange，提问作者Nayeemur