只有 setTimeout 执行函数。 JS答案

【问题标题】：Only setTimeout executes function. JS只有 setTimeout 执行函数。 JS
【发布时间】：2013-11-22 22:32:11
【问题描述】：

我正在尝试在我的网站上实现一种播放器。如果按下'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.
    }
}

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

【问题讨论】：

那是因为你的 while 循环是阻塞的，而 setTimeout 是非阻塞的，所以你的脚本中的某些东西会改变一些东西，并且使用 setTimeout 会延迟执行，直到进行这些更改之后，因为脚本继续执行并且只是将超时功能排队等待以后，而循环只是阻塞浏览器并且正常的执行链仍在播放中。
offset的值是多少，如何计算？
让我猜猜，静音按钮看起来像<a href="#"> 而你没有取消活动？
muteBUtton 是链接吗？带有href="#" 属性？
是的，它是一个链接！那是问题吗？我应该用标签改变它吗？

标签： javascript settimeout

【解决方案1】：

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

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

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

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

【讨论】：

谢谢！太简单！太棒了！