Skip to content

可以再加个 完成后的回调函数 (Run ID: coffeedeveloper_typing.js_issue_10_36b49796) #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

可以再加个 完成后的回调函数 (Run ID: coffeedeveloper_typing.js_issue_10_36b49796) #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)

引入相关文件

Expand All @@ -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>
Expand Down Expand Up @@ -94,11 +96,13 @@ typing.resume();
```
### 更新记录

- 2.1
- 增加`onComplete`回调函数，该回调函数会在打印完成后被调用，并且会接收typing实例作为参数
- 1.4
- 增加`UMD`模块加载
- 1.3
- 增加打印完成后的回调函数
- 1.2
- 移除对`es5-shim`的依赖
- 1.1
- 修复IE8会报错的bug(`Array.prototype.slice`改为用`for`)
- 修复IE8会报错的bug(`Array.prototype.slice`改为用`for`)
72 changes: 72 additions & 0 deletions demo/demo3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 7 additions & 2 deletions typing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -114,4 +119,4 @@
Typing.version = '2.1';

return Typing;
}));
}));