Question

这很难解释..

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

看到消息是如何预设的，我试图按比例缩放“传入消息动画”和消息延迟时间，根据函数中传递的“消息”的长度来模拟用户打字在另一端（3句话信息立即出现是没有意义的，30秒后出现3个措辞信息是没有意义的）

我已经包含了一个小提琴来更好地说明我的目标......现在它只检查消息的长度是否为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.");

Answer 1

如何将时间乘以消息的长度？即setTimeout(..., 50 * dialog.length)（要调整的数字）。为了避免长时间长时间的消息，您可以使用日志功能，即：Math.round(Math.log(dialog.length) * ...)

Answer 2

利用JS是一种功能语言这一事实。当动画结束时（.fadeIn()）。

，JQuery Animations调用回调函数

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

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的好书;-)当然，如果您对代码有任何疑问，请随时提出。

模拟传入的消息通知

2 个答案: