javascript - Onclick 更改按钮的名称和功能

Question

我一直在论坛中寻找答案，但仍然陷入困境。

我创建了一个按钮，其 onclick 属性指向 stopRotation() 函数。

<button type="button" class="changeText" onclick="stopRotation();">Stop Rotation</button>

点击它后，会发生以下情况:

1. 应用程序中的地球仪停止旋转(成功)
2. 按钮上的文字从“停止旋转”更改为“开始旋转”(成功)

这是通过以下代码行实现的:

$(".changeText").click(function () {
    $(this).text(function(i, v){
        return v === 'Start Rotation' ? 'Stop Rotation' : 'Start Rotation'
    })
});

var lastNow = Date.now();

function rotation(clock){
    if(scene.mode == Cesium.SceneMode.SCENE3D){
        var now = Date.now();
        var spinRate = 0.08;
        var delta = (now - lastNow) / 1000;
        lastNow = now;
        scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
    }
}    

function stopRotation(){
    viewer.clock.onTick.removeEventListener(rotation);
}

现在按钮的文本设置为“开始旋转”，如何调用该函数以便在用户单击按钮后地球仪再次开始旋转？

function startRotation(){
    viewer.clock.onTick.addEventListener(rotation);
}

提前谢谢您。

艾伦

Answer 1

由于您要调用点击监听器和函数，因此我将删除 onclick 调用并将所有逻辑移至您的点击监听器。

$(".changeText").click(function () {
    $(this).text(function(i, v){
        if (v === 'Start Rotation')
           viewer.clock.onTick.addEventListener(rotation);
        else 
           viewer.clock.onTick.removeEventListener(rotation);

        return v === 'Start Rotation' ? 'Stop Rotation' : 'Start Rotation'
    })
});

var lastNow = Date.now();

function rotation(clock){
    if(scene.mode == Cesium.SceneMode.SCENE3D){
        var now = Date.now();
        var spinRate = 0.08;
        var delta = (now - lastNow) / 1000;
        lastNow = now;
        scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
    }
}