2

我正在使用 MooTools 1.4.5，我想在调用需要一些时间的函数之前更改光标，在完成相同的函数后将光标设置为默认值。我没有成功。

之后，我做了一个简单的例子，通过纯 JavaScript（没有 jQuery 或 MooTools 插件）更改背景颜色，但我还是没有成功。

这是我的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
    <script type="text/javascript">
    <!--
        document.body.style.background = 'red';
        setTimeout(function () {  }, 1250);
        document.body.style.background = 'yellow';
    //-->    
    </script>
</html>

首先，我将背景颜色设置为红色，延迟后设置为黄色。我假设背景颜色将设置为红色，延迟后设置为黄色。它不起作用。加载页面时，背景颜色为黄色（最后一行）。如果我在设置背景颜色的行中间插入警报功能，一切正常（背景颜色为红色，单击消息框，背景颜色为黄色）。为什么会这样？只有最后更改的样式受到影响。在调用需要 10 秒的函数并在函数完成后将光标设置为默认值之前，我需要类似的东西来更改指针。

4

2 回答 2

2

setTimeout并不意味着“等待”。它会调用你稍后给它的函数。执行流程立即继续：

document.body.style.background = 'red';
setTimeout(function () {
    document.body.style.background = 'yellow';
}, 1250);

因此，这也有效：

setTimeout(function () {
    document.body.style.background = 'yellow';
}, 1250);
document.body.style.background = 'red';

对于游标，只需.background = 'red'用.cursor = 'wait'和.background = 'yellow'替换.cursor = 'default'。

document.body.style.cursor = 'wait';
setTimeout(function() {
    doSomethingExpensive();
    document.body.style.cursor = 'default';
}, 10);
于 2012-06-02T22:24:27.450 回答
1

的第一个参数setTimeout()是一个回调函数，延迟后会被调用，你应该使用这样的代码：

document.body.style.background = 'red';
document.body.style.cursor = 'wait';
setTimeout(function(){ 
   document.body.style.background = 'yellow'; 
   document.body.style.cursor = 'default';
}, 1250);
body { 
    width: 100%;
    height: 100%;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum.

在此处查看有关 setTimeout的更多信息

于 2012-06-02T22:26:27.000 回答