1

这个有点难解释。。

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

看到消息是如何预设的，我试图根据函数中传递的“消息”的长度按比例缩放“传入消息动画”和消息延迟时间，以模拟用户在另一个上打字结束（三句话的消息立即出现是没有意义的，而三句话的消息在 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 &gt; "+message+"</span>");
}

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

2 回答 2

1

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

于 2013-08-08T23:37:23.923 回答
1

利用 JS 是一种函数式语言这一事实​​。当动画完成时（ .fadeIn() ） ，JQuery 动画调用回调函数。

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

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

于 2013-08-09T00:03:49.550 回答