From 3121a46986a7b5b4864f9450eb084f4a174c39ce Mon Sep 17 00:00:00 2001
From: "agentfarmx[bot]" <198411105+agentfarmx[bot]@users.noreply.github.com>
Date: Thu, 20 Mar 2025 09:21:10 +0000
Subject: [PATCH] feat: add onComplete callback with typing instance parameter

---
 README.md       | 10 ++++---
 demo/demo3.html | 72 +++++++++++++++++++++++++++++++++++++++++++++++++
 typing.js       |  9 +++++--
 3 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 demo/demo3.html
diff --git a/README.md b/README.md
index ef7657f..ad3059f 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
 # 史上最华丽的打字效果JS插件
 
-### 当前版本**1.4**
+### 当前版本**2.1**
 
 [Demo](http://coffeedeveloper.github.io/typing.js/demo.html)
 [Demo2](http://coffeedeveloper.github.io/typing.js/demo2.html)
+[Demo3 - onComplete Callback](http://coffeedeveloper.github.io/typing.js/demo3.html)
 
 引入相关文件
 
@@ -24,7 +25,8 @@
     source: document.getElementById('source'),
     output: document.getElementById('output'),
     delay: 80,
-    done: function() {} //完成打印后的回调事件
+    done: function() {}, //完成打印后的回调事件（无参数）
+    onComplete: function(instance) {} //完成打印后的回调事件（带有typing实例参数）
   });
   typing.start();
 </script>
@@ -94,6 +96,8 @@ typing.resume();
 ```
 ### 更新记录
 
+- 2.1
+  - 增加`onComplete`回调函数，该回调函数会在打印完成后被调用，并且会接收typing实例作为参数
 - 1.4
   - 增加`UMD`模块加载
 - 1.3
@@ -101,4 +105,4 @@ typing.resume();
 - 1.2
   - 移除对`es5-shim`的依赖
 - 1.1
-  - 修复IE8会报错的bug(`Array.prototype.slice`改为用`for`)
+  - 修复IE8会报错的bug(`Array.prototype.slice`改为用`for`)
\ No newline at end of file
diff --git a/demo/demo3.html b/demo/demo3.html
new file mode 100644
index 0000000..a3f7133
--- /dev/null
+++ b/demo/demo3.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>typing.js onComplete callback demo</title>
+  <link rel="stylesheet" href="bootstrap.min.css">
+  <link rel="stylesheet" href="bootstrap-theme.min.css">
+  <link rel="stylesheet" href="../typing.css">
+  <link rel="stylesheet" href="demo.css">
+  <script src="../typing.js"></script>
+  <style>
+    .completion-message {
+      margin-top: 20px;
+      padding: 15px;
+      border-radius: 5px;
+      background-color: #dff0d8;
+      border: 1px solid #d6e9c6;
+      color: #3c763d;
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-lg-6">
+        <div id="source">
+          <h1>onComplete Callback Demo</h1>
+          <p>This demo shows how to use the onComplete callback function that is called when typing is completed.</p>
+          <p>The onComplete callback receives the typing instance as an argument, allowing you to access all properties and methods of the typing instance.</p>
+        </div>
+      </div>
+      <div class="col-lg-6">
+        <div id="output-wrap">
+          <div id="output"></div>
+          <span class="typing-cursor">|</span>
+        </div>
+        <div id="completion-message" class="completion-message">
+          Typing completed! You can now perform additional actions.
+        </div>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript">
+    var typing = new Typing({
+      source: document.getElementById('source'),
+      output: document.getElementById('output'),
+      delay: 80,
+      // The traditional done callback (no arguments)
+      done: function() {
+        console.log('Typing completed (done callback)');
+      },
+      // The new onComplete callback (receives typing instance)
+      onComplete: function(instance) {
+        console.log('Typing completed (onComplete callback)');
+        console.log('Typing instance:', instance);
+        
+        // Show completion message
+        document.getElementById('completion-message').style.display = 'block';
+        
+        // You can access all properties and methods of the typing instance
+        // For example, you could pause and resume typing
+        // instance.pause();
+        // setTimeout(function() {
+        //   instance.resume();
+        // }, 2000);
+      }
+    });
+    typing.start();
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/typing.js b/typing.js
index bbe7704..a6a2a71 100644
--- a/typing.js
+++ b/typing.js
@@ -22,6 +22,8 @@
     this._stop = true;
 
     if (!(typeof this.opts.done == 'function')) this.opts.done = function() {};
+    // Add support for onComplete callback
+    if (!(typeof this.opts.onComplete == 'function')) this.opts.onComplete = function() {};
   }
 
   Typing.fn = Typing.prototype = {
@@ -70,7 +72,10 @@
       if (!ele) return;
       if (!ele.val.length) {
         if (ele.parent) this.play(ele.parent);
-        else this.opts.done();
+        else {
+          this.opts.done();
+          this.opts.onComplete(this); // Call the onComplete callback with the typing instance
+        }
         return;
       }
 
@@ -114,4 +119,4 @@
   Typing.version = '2.1';
 
   return Typing;
-}));
+}));
\ No newline at end of file
