Question

我一直认为javascript是一种单线程语言（至少在大多数情况下）。

正如您在我的代码中看到的那样：

<html>
<body>

<a onclick="test();">test</a>

</body>
<script>
var text = "test";
function show()
{
    console.log("show(): "+ text);
}
function test()
{
    console.log("before: "+text);
    change();
    console.log("after: "+text);
    show();
}
function change()
{
    text = stateChange(-1);
}
function stateChange(newState) {
    var output = "empty";
    setTimeout(function () {
        if (newState == -1) {
            alert('VIDEO HAS STOPPED');
            output = "newText";
            console.log("AFTER 5 Sec: "+output);
        }
    }, 5000);
    return output;
}

</script>
</html>

我的stateChange函数在完成函数之前返回一个变量。在将变量返回到change（）函数之前，它没有等待5秒。因此，test（）函数中的所有函数都被执行（当然，警报显示5秒后）。

我的问题是，有没有办法只在函数完全完成时返回变量。似乎javascript创建了另一个线程来执行其他功能。有什么方法可以绕过这个吗？

（这也发生在ajax中，我将有一个函数，我认为我将在完成ajax调用后返回，但结果函数只是在完成ajax调用之前立即返回。）

我希望我的test（）函数按顺序工作。

Answer 1

这是因为setTimeout（）是异步执行的，在创建将来执行的定时器后，调用函数将在执行超时处理程序之前继续执行。

如果你想等待5秒然后执行某些事情，那么你可以使用像

这样的回调

var text = "test";

function show() {
  console.log("show(): " + text);
}

function test() {
  console.log("before: " + text);
  change(function(data) {
    console.log("after: " + text);
    console.log('param', data)
    show();
  });
}

function change(callback) {
  stateChange(-1, function(output) {
    console.log('after change', output);
    text = output;
    callback(text)
  });
}

function stateChange(newState, callback) {
  var output = "empty";
  setTimeout(function() {
    if (newState == -1) {
      alert('VIDEO HAS STOPPED');
      output = "newText";
      console.log("AFTER 5 Sec: " + output);

      callback(output)
    } else {
      callback(output)
    }
  }, 5000);
}

<a onclick="test();">test</a>

How JavaScript Timers Work

Answer 2

setTimeout调用中函数中的代码在经过五秒后执行。调用setTimeout后，stateChange函数将完成执行。

Javascript - 在函数完成之前函数返回变量？

2 个答案: