Nodejs中ejs文件里setTimeout函数怎么用

Nodejs中ejs文件里setTimeout函数怎么用

在ejs文件里面 写 setTimeout(function(){ console.log(“vvvvv”); 这个是起效的 如果想输出内容到浏览器怎么弄 比如php 的 echo “vvvv”; },10000);

2 回复

当然可以。在EJS文件中使用setTimeout函数与在普通的JavaScript环境中使用它的方式基本相同。但是，需要注意的是，setTimeout是在客户端（即用户的浏览器）执行的，而不是在服务器端。如果你希望将某些内容输出到浏览器，你需要确保这些内容是在客户端脚本中生成的。

以下是一个简单的例子，展示了如何在EJS文件中使用setTimeout函数，并且如何将内容输出到浏览器：

示例代码

假设你有一个EJS文件（例如 index.ejs），内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS with setTimeout Example</title>
</head>
<body>
    <div id="message"></div>

    <script>
        // 使用setTimeout在10秒后更新页面上的内容
        setTimeout(function() {
            document.getElementById('message').innerHTML = 'vvvvv';
        }, 10000);
    </script>
</body>
</html>

解释

  1. HTML 结构：

    • 我们创建了一个简单的HTML结构，包含一个<div>元素，其ID为message。

  2. JavaScript 脚本：

    • 在<script>标签中，我们使用setTimeout函数来设置一个定时器。
    • 定时器将在10秒后执行一个函数。
    • 函数内部，我们通过document.getElementById('message').innerHTML获取到id为message的元素，并将其内容设置为'vvvvv'。

  3. 效果：

    • 当页面加载完成后，用户将看到一个空的<div>。
    • 10秒后，<div>的内容会变为'vvvvv'。

注意事项

  • 服务器端 vs 客户端：setTimeout是在客户端执行的，因此你不能直接使用console.log来输出内容到浏览器。如果要在服务器端输出内容，你需要使用EJS模板引擎的语法，例如<%= variable %>或<%- variable %>。

希望这个示例能帮助你理解如何在EJS文件中使用setTimeout函数以及如何将内容输出到浏览器。


在 EJS 文件中使用 setTimeout 函数时，你需要理解 setTimeout 是一个客户端定时器，它运行在用户的浏览器中。因此，如果你想在 EJS 文件中使用 setTimeout 来向浏览器输出内容，你应该直接操作 DOM 或者通过异步请求更新页面内容。

EJS 主要用于服务器端渲染，而 setTimeout 通常用于客户端的交互逻辑。如果你想在 EJS 中预渲染一些数据，你可以直接使用 EJS 的模板语法，例如 <%= data %> 来插入变量。

下面我将展示如何在 EJS 文件中使用 setTimeout 函数，并在浏览器中输出内容：

示例代码

server.js:

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const message = "Hello from server!";
    res.render('index', { message });
});

app.listen(3000, () => console.log('Server running on port 3000'));

views/index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EJS with setTimeout</title>
<script>
// 当页面加载完成后执行
document.addEventListener("DOMContentLoaded", function() {
    // 使用 setTimeout 定义一个 10 秒后执行的函数
    setTimeout(function() {
        // 更新页面上的内容
        document.getElementById('message').innerText = "<%= message %>";
    }, 10000);
});
</script>
</head>
<body>
<h1 id="message"></h1>
</body>
</html>

在这个例子中，我们首先通过 Express 渲染了一个 EJS 模板，并传递了一个变量 message 到前端。在 EJS 模板中，我们定义了一个脚本，在页面加载完成后（通过 DOMContentLoaded 事件），设置了一个 10 秒的延迟，然后更新了页面上 ID 为 message 的元素的内容。注意这里的 <%= message %> 会在服务器端渲染时被替换为实际值。

希望这能帮助你理解如何在 EJS 文件中使用 setTimeout 函数以及如何在浏览器中输出内容。

回到顶部