0

我正在从事音频会议项目，以在所有最新的浏览器上工作。谁在麦克风上讲话，将在服务器上生成一个事件并在 javascripts 中调用一个函数（whoIsTalking()）。我正在替换 CSS 以进行动画处理，以便通过根据需要切换 CSS（进而切换背景图片）来提高音量。但是 javascript 运行得如此之快，以至于我看不到 css 的任何变化。我需要在演讲者讲话时提高和降低音量。谁可以帮我这个事？

this.whoIsTalking = function (action, id, type) {
    if(_selfM.logging) {
        log.info("The current user who is " + action + " with id " + id + " , recieved from :" + type);
    }
    talker(id);
}
/**
 * Change class for talker
 *
 */
function talker(id) {
    if(_selfM.logging) log.debug('Now in the "talker" function');
    var talker = "talker_" + id;
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_low');
    console.log($('span#' + talker));
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_medium');
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_high');
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_medium');
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_low');
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume');
}

注：alterClass('x','y')同removeClass('x').addClass('y')；参考：alterClass

4

1 回答 1

1

您可以使用计时器来调整班级更改的时间，以便它们间隔出可预测的时间量：

function talker(id) {
    if(_selfM.logging) log.debug('Now in the "talker" function');
    var volumes = ["_low", "_medium", "_high", "_medium", "_low", ""];
    var item = $('#talker_' + id);
    var index = 0;
    function next() {
        var cls = item.attr("class");
        var match = cls.match(/(btn-volume.*?)[\s$]/);
        if (match) {
            item.removeClass(match[1]);
        }
        item.addClass("btn-volume" + volumes[index]);
        index++;
        // if still more to go, set timer for next class change
        if (index < volumes.length) {
            setTimeout(next, 500);
        }
    }
    // start the process
    next();
}

这也使用了一个卷名数组来避免重复大量的代码和名称。

于 2013-03-28T04:53:36.747 回答