diff --git a/src/components/Editors.vue b/src/components/Editors.vue
index 1445fb0..1bcc5d5 100644
--- a/src/components/Editors.vue
+++ b/src/components/Editors.vue
@@ -19,11 +19,11 @@
         </template>
         <Editor language="css" :font-size="size" v-model:value="css" />
       </n-tab-pane>
-      <n-tab-pane name="js" tab="JS">
+      <n-tab-pane name="js" tab="JavaScript">
         <template #tab>
           <n-flex align="center">
             <Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
-            <span>JS(需要刷新)</span>
+            <span>JavaScript</span>
           </n-flex>
         </template>
         <Editor language="js" :font-size="size" v-model:value="js" />
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index d7446df..9b866c9 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script lang="ts" setup>
+import { watchDebounced } from "@vueuse/core"
 import { html, css, js } from "../store.ts"
-import { onMounted, useTemplateRef, watch } from "vue"
+import { onMounted, useTemplateRef } from "vue"
 
 const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
 
@@ -23,12 +24,12 @@ function preview() {
   </head>
   <body>
     ${html.value}
-    <script>${js.value}<\/script>
+    <script type="module">${js.value}<\/script>
   </body>
 </html>`)
   doc.close()
 }
-watch([html, css], preview)
+watchDebounced([html, css, js], preview, { debounce: 500, maxWait: 1000 })
 onMounted(preview)
 </script>
 <style scoped>
