0

私は音声会議プロジェクトに取り組んでおり、最新のブラウザすべてで動作します。マイクで話す人は、サーバーでイベントを生成し、JavaScript で関数 (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')です。ref :変更クラス

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 に答える