Javascript 模拟传入消息通知

这有点难以解释

我试图通知用户正在“键入”一条“消息”。但是，它是来自函数中参数的预设消息

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

为了更好地说明我的目标，我加入了一把小提琴……现在它只检查消息的长度是否为24个字符；而“else if”目前是我试图实现的目标的占位符

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

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

功能通信（对话框）{
如果（dialog.length==24）{
信息图标（3）；
setTimeout（函数（）{
调用示例（对话框）；
}, 2500);
}否则如果（dialog.length>24）{
警报（“oops”）；
}
}
功能信息图标（时间）{
$（“#infoBox”）。追加（“…”）；
对于（i=0；i将时间乘以消息长度如何？即
setTimeout（…，50*dialog.length）
（要调整的数字）。为了避免长消息的时间过长，可以使用日志函数，即：
Math.round（Math.log（dialog.length）*…）
利用JS是函数式语言这一事实。当动画完成时，JQuery动画调用回调函数（）

我的方法（确保在图标可见时消息永远不会出现）是将等待图标和消息的显示结合在一起，在图标足够闪烁后显示消息


功能通信（对话框）{
//除以8，因为图标闪烁为3
//24个字符消息的原始代码时间。
//但实际上，这可以是你想要的任何东西。任何东西；-）
var迭代次数=dialog.length/8；
$（“#infoBox”）。追加（“…”）；
//这个方法只是让下一个方法更容易阅读
//它会闪烁一次给定的jQuery选择，然后
//调用回调函数
函数fadeInThenOut（jq，回调）{
jq.fadeIn（'fast'，function（）{
jq.淡出（“慢”，回调）；
});
}
//此函数将图标“IterationToCome”闪烁三次
//完成后，它调用回调。
//递归用于使这件事情异步（必需）
//通过使用jQuery动画）。
函数flashIcon（迭代到组，回调）{
fadeInThenOut（$（'.icon'），函数（）{
//递归函数的经典模式
如果（迭代到组>0）{
flashIcon（迭代到组-1，回调）；
}否则{
回调（）；
}
});
}
flashIcon（迭代，函数（）{
$（'#infoBox.icon'）.remove（）；
//在最后一段时间里引起一些额外的延迟
//等等。也可以删除，以及append（）
//马上打电话来。
setTimeout（函数（）{
$（“#infoBox”）.append（“示例”+对话框+”）；
}, 100);
});
}
沟通（“这只是一个例子”）；

请注意，我正在大量使用基于函数的变量和闭包作用域当然，如果您对代码有任何疑问，请随时提问。
如果您真的希望switch语句准确描述键入消息所需的时间，则可能需要switch语句。5-10个单词可能需要5秒，20个单词可能需要10秒，等等。任何不太精细的语句都不太现实。
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.");