模拟传入消息通知
Simulate incoming message notification
这有点难以解释。。
我正在尝试通知用户正在"键入"一条"消息"。然而,这是来自函数中某个参数的预设消息。
考虑到消息是如何预设的,我正试图根据函数中传递的"消息"的长度按比例缩放"传入消息动画"和消息延迟时间,以模拟用户在另一端打字(3句话的消息立即出现是没有意义的,3个字的消息在30秒后出现也是没有意义的)
我加入了一把小提琴,以更好地说明我的目标。。。现在它只检查消息的长度是否为24个字符;"else if"目前是我努力实现的目标的持有者。
http://jsfiddle.net/ducFh/1/
jquery
function communicate(dialog) {
if (dialog.length === 24) {
messageIcon(3);
setTimeout(function() {
callExample(dialog);
}, 2500);
} else if (dialog.length > 24) {
alert('oops');
}
}
function messageIcon(time) {
$('#infoBox').append("<span class='icon'>...</span>");
for (i=0;i<time;i++) {
$('.icon').fadeIn('fast');
$('.icon').fadeOut('slow');
if (i === time) {
$('#infoBox .icon').remove();
}
}
}
function callExample(message) {
$('#infoBox').append("<span>example > "+message+"</span>");
}
communicate("this is only an example.");
利用JS是一种函数式语言这一事实。JQuery动画在动画完成时调用回调函数(.fadeIn())。
我的方法(确保图标可见时消息永远不会出现)是将等待图标和消息显示结合在一起,在图标充分闪烁后显示消息。
http://jsfiddle.net/ducFh/2/
function communicate(dialog) {
// dividing by 8 because the icon was flashed 3
// times in original code for a 24 character message.
// But really this can be anything you want. Anything ;-)
var iterations = dialog.length / 8;
$('#infoBox').append("<span class='icon'>...</span>");
// This method just makes the next method easier to read
// It flashes the given jQuery selection once and then
// calls the callback
function fadeInThenOut(jq, callback) {
jq.fadeIn('fast', function () {
jq.fadeOut('slow', callback);
});
}
// This function flashes the icon `iterationsToCome`-times
// After it has finished it calls the callback.
// Recursion is used to make this thing asynchronous (required
// by the use of jQuery animations).
function flashIcon(iterationsToCome, callback) {
fadeInThenOut($('.icon'), function () {
// classic pattern of recursive functions
if (iterationsToCome > 0) {
flashIcon(iterationsToCome - 1, callback);
} else {
callback();
}
});
}
flashIcon(iterations, function () {
$('#infoBox .icon').remove();
// provoke some additional delay for the last
// wait. could also be removed, and the append()
// called immediately.
window.setTimeout(function () {
$('#infoBox').append("<span>example > " + dialog + "</span>");
}, 100);
});
}
communicate("this is only an example.");
请注意,我正在大量使用基于函数的变量和闭包的作用域。如果你不知道这一点,你应该找一本关于JavaScript的好书;-)当然,如果您对代码有任何疑问,请随时询问。
将时间乘以消息长度怎么样?即CCD_ 1(要调整的数目)。为了避免长消息的超长时间,您可以使用日志功能,即:Math.round(Math.log(dialog.length) * ...)
相关文章:
- 当gullow-eslit失败时,抛出一条gullow通知消息
- AngularJS - $broadcast给控制器的消息会生成重复的通知
- 我希望更新未读消息的数量,并在用户收到新消息时播放通知声音.我正在使用PHP,MySql,Javascript
- 在Facebook中向用户发送通知的邀请朋友消息
- 通过 JavaScript 发送 Mac OS X 通知中心消息 - 10.10 Yosemite
- 如何在发送消息时通知用户
- javascript中的消息通知
- 我们如何更改facebook appequests通知消息
- 如何实现即时用户消息和通知系统
- 模拟传入消息通知
- HTML5 web应用程序中的推送通知/消息
- FCM推送通知消息没有显示
- 设备没有收到推送通知消息
- FCM消息通知消息和数据消息(WEB桌面推送通知)
- 如何通过主干视图渲染持久化状态消息/图标/通知
- 轮询新消息警报/通知
- 如何使用JQuery在Android的通知区提醒消息
- 当我们在ng-admin的listview中点击保存按钮时,我们如何更改通知消息?
- Wordpress插件可通过通知消息重定向
- 网站通知消息