Question

我正在尝试将某些音频可视化，并且需要在特定时间执行一次功能。动画循环应该与玩家同步，当玩家当前时间达到10秒时，执行一个功能。 timeupdate事件根据浏览器触发，时间变量永远不等于10.实现该目标的最有效方法是什么？

    int colsize1 = tableview1.getColumns().size();
    int colsize2 = tableview2.getColumns().size();

    if (colsize1 != colsize2) {

        alert("number of columns do not match, cannot be validated");
        return;
    }

    int size = tableview1.getItems().size();

    for (int i = 0; i < size; i++) {

        for (int j = 0; j < colsize1; j++) {

            TableColumn columns2 = tableview2.getColumns().get(j);

          //     String value = tableview1.getItems().get(currentrow).get(j);

            settingcell(columns2);
        }
    }

    }


private void settingcell(TableColumn<ObservableList<String>,String> column) {

    column.setCellFactory(col -> {
        return new TableCell<ObservableList<String>, String>() {

            @Override
            protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);

                if (!empty) {

                   int ind =  getTableView().getVisibleLeafIndex(column);

                  //  System.out.println(" ind is " + ind);

                   String value = tableview1.getItems().get(this.getIndex()).get(ind);

                  //  System.out.println(" value is " + value + " & item is "+ item);
                        if (!(StringUtils.equals(value,item))) {

                            this.setText(item);
                            this.setTextFill(Color.RED);
                            this.setStyle("-fx-background-color : yellow");

                        } else {
                            this.setText(item);
                        }
                    }
                    else{
                        this.setText("");
                    }
            }
        };
    });
}

Answer 1

您可以使用一些“功能性编程魔术”以优雅的方式实现这一目标：

var time = 0;

var player = document.getElementById('player');

player.addEventListener('timeupdate',function(e){
    time = e.target.currentTime;
},false);

function callback(){
    console.log('do something once');
}

function doOnceAfterElapsedTime(func, elapsedTime) {
    var done = false;
    return function () {
        if (done || elapsedTime < time) {
            return;
        }
        func();
        done = true;
    }
}

const callbackThatExecutesOnceAfterElapsedTime = doOnceAfterElapsedTime(callback, 10);

function loop(){
    callbackThatExecutesOnceAfterElapsedTime();
    setTimeout(loop,32);
}

loop();
player.play();

函数doOnceAfterElapsedTime创建一个新函数，确保包装的callback函数仅在指定的时间过后执行一次。

Answer 2

var vid = document.getElementById("myVideo");
var execute = false;

vid.ontimeupdate = function() {

 if(vid.currentTime >= 5 && !execute){
  myFunction();
  execute = true;
 }
 
};

function myFunction() {
  console.log('executed')
  document.getElementById("res").innerHTML += 'executed';
}

<video id="myVideo" width="320" height="176" controls>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<div id='res'></div>

您可以使用obj.currentTime检查特定的音频/视频时间，并在经过大部分时间后调用功能。

Answer 3

timeUpdate事件可能非常繁忙。特别是当你说你有很多这些时，你可能最终会用大量无用的时间检查任务填满事件队列。这可能会延迟执行其他事件触发的其他一些回调。为什么不在player.currentTime元素设置另一个类似于脏检查时间的循环，但这次就像setTimeout(loop2, 500)。触发第二个循环，如

player.removeEventListener("playing", loop2, false) // in case paused and restarted
player.addEventListener("playing", loop2, false)

在特定时间内在动画循环内执行一次函数

3 个答案: