gpt4 book ai didi

javascript - 模拟传入消息通知

转载 作者:行者123 更新时间:2023-11-30 17:55:25 26 4
gpt4 key购买 nike

这个有点难以解释..

我正在尝试通知用户正在“输入”“消息”。然而,它是来自函数内参数的预设消息。

鉴于消息是如何预设的,我正在尝试根据函数中传递的“消息”的长度按比例缩放“传入消息动画”和消息延迟时间,以模拟用户键入在另一端(3 句话的消息立即出现是没有意义的,30 秒后出现的 3 字的消息也没有意义)

我提供了一个 fiddle 来更好地说明我的目标...现在它只检查消息的长度是否为 24 个字符; “else if”目前是我要实现的目标的占位符。

http://jsfiddle.net/ducFh/1/

j查询

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 &gt; "+message+"</span>");
}

communicate("this is only an example.");

最佳答案

利用 JS 是一种函数式语言这一事实​​。 JQuery Animations 在动画完成时调用回调函数 ( .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 &gt; " + dialog + "</span>");
}, 100);
});
}

communicate("this is only an example.");

请注意,我正在大量使用基于函数的变量和闭包范围界定。如果您对此一无所知,您应该阅读一本关于 JavaScript 的好书 ;-) 当然,如果您对代码有任何疑问,请随时提出。

关于javascript - 模拟传入消息通知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18137935/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com