只有setTimeout执行函数.JS

Only setTimeout executes function. JS

本文关键字：JS 函数 执行 setTimeout 只有      更新时间：2023-09-26

我正在尝试在我的网站上实现这种播放器。如果按下'Play'按钮，音乐将开始播放，页面将平滑向下滚动。但是当你按下'Mute'按钮(function(){music.volume=0})时，我不知道为什么页面再次出现在顶部。window.scroll()不会毫不拖延地做任何事情。所以我使用setTimeout功能来滚动当前位置的页面。问题是，在Opera和IE中，setTimeout占用了10 ms，所以当我单击'Mute'按钮时，我看到顶部和后部都有类似的记号。在chrome中，它只需要2 ms，并且没有任何问题。现在，当我决定创建自己的超时函数时，window.scroll()将不再工作。

这是我的代码：

var isMuted = false;
muteButton.onclick = function() {   ////This function works with big delay.
    if (!isMuted) {
        mainAudio.volume = 0;
        isMuted = true;
    } else {
        mainAudio.volume = bgAudioTrackVolume;
        isMuted = false;
    }
    setTimeout(function() {
        window.scroll(0, offset); /// Works
    }, 0)
};

将setTimeout更改为：

i = 9542155.873; /// I have tried delay time from 1ms - 250ms by changing this value.
while (i > 0.00001) {
    i = i / 1.0001234567;
    if (i < 0.00001) {
        window.scroll(0, offset); /// Does not do anything. Strange! Have tried to change variable with a number.
    }
}

每次我检查偏移值时，它总是在调用滚动功能之前可用。我知道我的问题不常见，我真的需要你的帮助。

页面滚动到顶部的原因是您使用了一个带有空书签#的链接，该书签代表页面的顶部。scroll方法在没有超时的情况下无法工作的原因是，跳到书签发生在事件处理程序之后。

不要试图将页面滚动回原来的位置，只需通过从事件处理程序返回false来停止链接的默认操作：

var isMuted = false;
muteButton.onclick = function() {
    if (!isMuted) {
        mainAudio.volume = 0;
        isMuted = true;
    } else {
        mainAudio.volume = bgAudioTrackVolume;
        isMuted = false;
    }
    return false;
};

或者，使用链接以外的其他元素。

相关文章：