如何强制顺序 Javascript 执行? [英] How to force Sequential Javascript Execution?

查看:68
本文介绍了如何强制顺序 Javascript 执行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我只找到了涉及类、事件处理程序和回调的相当复杂的答案(在我看来,这似乎是一种大锤方法).我认为回调可能有用,但我似乎无法在最简单的上下文中应用这些.看这个例子:

I've only found rather complicated answers involving classes, event handlers and callbacks (which seem to me to be a somewhat sledgehammer approach). I think callbacks may be useful but I cant seem to apply these in the simplest context. See this example:

<html>
  <head>
    <script type="text/javascript">
      function myfunction()  {
        longfunctionfirst();
        shortfunctionsecond();
      }

      function longfunctionfirst() {
        setTimeout('alert("first function finished");',3000);
      }

      function shortfunctionsecond() {
        setTimeout('alert("second function finished");',200);
      }
    </script>
  </head>
  <body>
    <a href="#" onclick="javascript:myfunction();return false;">Call my function</a>
  </body>
</html>

这里,第二个函数在第一个函数之前完成;强制第二个函数延迟执行直到第一个函数完成的最简单方法(或者有没有一个?)是什么?

In this, the second function completes before the first function; what is the simplest way (or is there one?) to force the second function to delay execution until the first function is complete?

---编辑---

所以这是一个垃圾示例,但感谢 David Hedlund 我在这个新示例中看到它确实是同步的(以及在测试过程中我的浏览器崩溃!):

So that was a rubbish example but thanks to David Hedlund I see with this new example that it is indeed synchronous (along with crashing my browser in the test process!):

<html>
<head>

<script type="text/javascript">
function myfunction() {
    longfunctionfirst();
    shortfunctionsecond();
}

function longfunctionfirst() {
    var j = 10000;
    for (var i=0; i<j; i++) {
        document.body.innerHTML += i;
    }
    alert("first function finished");
}

function shortfunctionsecond() {
    var j = 10;
    for (var i=0; i<j; i++) {
        document.body.innerHTML += i;
    }
    alert("second function finished");
}
</script>

</head>

<body>
  <a href="#" onclick="javascript:myfunction();return false;">Call my function</a>
</body>
</html>

由于我的实际问题是 jQuery 和 IE,如果我自己无法到达任何地方,我将不得不发布一个单独的问题!

As my ACTUAL issue was with jQuery and IE I will have to post a separate question about that if I can't get anywhere myself!

推荐答案

好吧,setTimeout,根据其定义,不会阻止线程.这是可取的,因为如果这样做,它会在等待的时候冻结整个 UI.如果你真的需要使用setTimeout,那么你应该使用回调函数:

Well, setTimeout, per its definition, will not hold up the thread. This is desirable, because if it did, it'd freeze the entire UI for the time it was waiting. if you really need to use setTimeout, then you should be using callback functions:

function myfunction() {
    longfunctionfirst(shortfunctionsecond);
}

function longfunctionfirst(callback) {
    setTimeout(function() {
        alert('first function finished');
        if(typeof callback == 'function')
            callback();
    }, 3000);
};

function shortfunctionsecond() {
    setTimeout('alert("second function finished");', 200);
};

如果您使用setTimeout,但只是有执行很长时间的函数,并且使用setTimeout来模拟,那么你的函数实际上是同步的,你根本就不会遇到这个问题.不过,应该注意的是,AJAX 请求是异步的,并且就像 setTimeout 一样,在 UI 线程完成之前不会阻止它.使用 AJAX,就像使用 setTimeout 一样,您必须使用回调.

If you are not using setTimeout, but are just having functions that execute for very long, and were using setTimeout to simulate that, then your functions would actually be synchronous, and you would not have this problem at all. It should be noted, though, that AJAX requests are asynchronous, and will, just as setTimeout, not hold up the UI thread until it has finished. With AJAX, as with setTimeout, you'll have to work with callbacks.

这篇关于如何强制顺序 Javascript 执行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆