在vue3中setInterval 和 setTimeout 的区别

setInterval 和 setTimeout 主要有以下区别：

1. 执行方式：

   • setInterval 会按照指定的时间间隔重复执行指定的函数或代码段。
   • setTimeout 只会在指定的延迟时间后执行一次指定的函数或代码段。

2. 连续执行：

   • setInterval 会不断地按照固定间隔重复触发执行，除非被手动清除。
   • setTimeout 每次执行完后不会自动再次执行，除非在回调函数内部再次调用 setTimeout 来实现类似的重复效果。

3. 清除方式：

   • 对于 setInterval，使用 clearInterval 方法并传入 setInterval 返回的标识符来停止定时任务。
   • 对于 setTimeout，使用 clearTimeout 方法并传入 setTimeout 返回的标识符来取消定时任务。

4. 应用场景：

   • setInterval 适用于需要周期性执行的任务，比如定时更新数据或动画效果。
   • setTimeout 适用于在延迟一段时间后执行一次性的任务，比如延迟加载、延迟显示提示信息等。

总的来说，setInterval 用于重复执行，setTimeout 用于延迟执行一次。

虽然 DOM 型 XSS 攻击不经过服务器直接在客户端执行，但攻击者仍然可以通过以下方式窃取受害者的信息：

1. 使用 JavaScript 操作浏览器的 Cookie：通过 JavaScript 可以读取浏览器中与当前页面同源的 Cookie 信息。攻击者可以将获取到的 Cookie 发送到自己控制的服务器上。

2. 劫持表单提交：攻击者可以修改表单的提交行为，将表单数据发送到攻击者控制的服务器，而不是原本预期的合法服务器。

3. 利用浏览器的历史记录和缓存：获取浏览器的历史记录或读取本地缓存中的敏感信息。

4. 劫持浏览器的通信：例如，通过 JavaScript 拦截 XMLHttpRequest 或 Fetch API 的请求和响应，获取其中的敏感数据。

5. 诱导用户操作：通过弹出对话框等方式诱导用户进行某些操作，例如输入密码或其他敏感信息，然后获取这些输入。

总之，尽管攻击发生在客户端，但利用以下是一个使用 Vue 3 和 TypeScript 来演示 `setInterval` 和 `setTimeout` 的示例代码：

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="startInterval">启动间隔定时器</button>
    <button @click="startTimeout">启动延迟定时器</button>
    <button @click="stopInterval">停止间隔定时器</button>
    <button @click="stopTimeout">停止延迟定时器</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue';

let counter = ref(0);
let intervalId: number | null = null;
let timeoutId: number | null = null;

const startInterval = () => {
  intervalId = setInterval(() => {
    counter.value++;
  }, 1000);
};

const startTimeout = () => {
  timeoutId = setTimeout(() => {
    counter.value = 10;
  }, 5000);
};

const stopInterval = () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
};

const stopTimeout = () => {
  if (timeoutId) {
    clearTimeout(timeoutId);
    timeoutId = null;
  }
};

onUnmounted(() => {
  stopInterval();
  stopTimeout();
});
</script>

在上述代码中：

- `startInterval` 函数启动一个每秒递增 `counter` 值的 `setInterval` 定时器，并将其 ID 存储在 `intervalId` 中。
- `startTimeout` 函数在 5 秒后将 `counter` 值设置为 10，使用 `setTimeout` 并将其 ID 存储在 `timeoutId` 中。
- `stopInterval` 和 `stopTimeout` 函数分别用于停止对应的定时器。
- `onUnmounted` 钩子在组件卸载时自动调用停止定时器的函数，以避免潜在的内存泄漏。 JavaScript 的功能和浏览器的特性，攻击者仍然有多种手段来获取受害者的信息。

以下是对这段 Vue 3 代码的逐部分解析：

**模板部分（`<template>`）**：

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="startInterval">启动间隔定时器</button>
    <button @click="startTimeout">启动延迟定时器</button>
    <button @click="stopInterval">停止间隔定时器</button>
    <button @click="stopTimeout">停止延迟定时器</button>
  </div>
</template>

- 展示了一个段落 `<p>` 用于显示 `counter` 的值。
- 提供了四个按钮，分别用于触发 `startInterval`、`startTimeout`、`stopInterval` 和 `stopTimeout` 这四个方法。

**脚本部分（`<script setup>`）**：

import { ref, onUnmounted } from 'vue';

`- 从 `vue` 库导入了 `ref` 用于创建响应式数据，`onUnmounted` 用于组件卸载时执行一些清理操作。

let counter = ref(0);
let intervalId: number | null = null;
let timeoutId: number | null = null;

- `counter` 是一个使用 `ref` 创建的响应式数据，初始值为 0 ，用于记录计数。
- `intervalId` 和 `timeoutId` 用于存储 `setInterval` 和 `setTimeout` 返回的定时器 ID ，初始值为 `null` 。

const startInterval = () => {
  intervalId = setInterval(() => {
    counter.value++;
  }, 1000);
};

- `startInterval` 方法用于启动一个间隔为 1 秒（1000 毫秒）的定时器，每次定时触发时，`counter` 的值增加 1 ，并将定时器 ID 存储在 `intervalId` 中。

const startTimeout = () => {
  timeoutId = setTimeout(() => {
    counter.value = 10;
  }, 5000);
};

- `startTimeout` 方法用于启动一个延迟 5 秒（5000 毫秒）的定时器，定时结束时将 `counter` 的值设置为 10 ，并将定时器 ID 存储在 `timeoutId` 中。

const stopInterval = () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
};

- `stopInterval` 方法用于停止通过 `startInterval` 启动的定时器，如果 `intervalId` 存在（表示有正在运行的间隔定时器），则使用 `clearInterval` 清除，并将 `intervalId` 重置为 `null` 。

const stopTimeout = () => {
  if (timeoutId) {
    clearTimeout(timeoutId);
    timeoutId = null;
  }
};

- `stopTimeout` 方法用于停止通过 `startTimeout` 启动的定时器，逻辑与 `stopInterval` 类似。

onUnmounted(() => {
  stopInterval();
  stopTimeout();
});

- 使用 `onUnmounted` 钩子，在组件卸载时自动调用 `stopInterval` 和 `stopTimeout` 方法，以清除可能仍在运行的定时器，防止内存泄漏。