Question

我有一个简单的计数功能，将一个数字递增到一个输入字段。这正是我希望它的工作方式。唯一的问题是，我有一个带有多个函数的长JS脚本，我只希望脚本在count()函数完成时继续运行。

JSFIDDLE http://jsfiddle.net/vyN6V/243/

var number = 1500;
var aValue = 300;

function count(Item) {
    var current = aValue;
    Item.val(aValue += 1);
    if (current < number) {
        setTimeout(function () {
            count(Item)
        }, 0.1);
    }
}

count($(".input"));

// the rest of the script should only run when the above function has completed

$('span').text('code here should only run when function count is complete');

Answer 1

你需要的是一个回调。我确定你已经使用了回调，例如在jQuery中。

以下是将其添加到代码中的方法：

function count(Item, Callback) {    // new argument
    var current = aValue;
    Item.val(aValue += 1);
    if (current < number) {
        setTimeout(function () {
            count(Item, Callback)   // pass it in recursive calls 
        }, 0.1);
    } else {
        Callback();                 // call it at the end of the loop
    }
}

count($(".input"), function() {     // write the callback code here
    // this will be executed after the counts
});

Answer 2

setTimeout by design异步运行所以只需调用它就可以让你的代码继续处理并在它准备就绪时返回到setTimeout代码（它决定何时，而不是你）。

为了在JavaScript中执行此操作，您需要将其余代码封装在一个函数中，直到count函数完成后才调用该函数。

请问您为什么要以这种方式使用setTimeout？看起来你想要的实际上是一个同步函数，为什么不在count（）函数中简单地使用普通的while语句呢？

Answer 3

需要异步处理，在需要时调用回调函数restFunctionCalled()。这样的事情。

var number = 1500;
var aValue = 300;

function count(Item) {
    var current = aValue;
    Item.val(aValue += 1);
    if (current < number) {
        setTimeout(function () {
            count(Item)
        }, 0.1);
    }else{
        restFunctionCalled(); //invoke the callback function from here.
    }
}

count($(".input"));

function  restFunctionCalled(){
     $('span').text('code here should only run when function count is complete');
}

DEMO

Answer 4

试试这个：http://jsfiddle.net/aamir/vyN6V/248/

var number = 1500;
var aValue = 300;

function count(Item) {
    var current = aValue;
    Item.val(aValue += 1);
    if (current < number) {
        setTimeout(function () {
            count(Item)
        }, 0.1);
    } else {
        callback();
    }
}

count($(".input"));

function callback() {
    $('span').text('code here should only run when function count is complete');
}

Answer 5

如果您可以删除异步通话：

var number = 1500;
var aValue = 300;

function count(Item) {
    var current = aValue;
    while(current <= number){
        Item.val(aValue += 1);
        current = aValue;

    }
}

count($(".input"));

Answer 6

 var number = 1500;
    var aValue = 300;
     function count(Item) {
            var current = aValue;
            Item.val(aValue += 1);
            if (current < number) {
                setTimeout(function () {
                    count(Item)
                }, 0.1);
            }
            if (current == number) {
                $('span').text('code here should only run when function count is complete');
            }
        }

        count($(".input"));

Answer 7

您可以通过两种方式模拟睡眠或封装其余代码，并在功能完成时给您打电话（更可取的是第二种选择。）。

function sleep(milliSeconds){
var startTime = new Date().getTime(); // get the current time
while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

或

function callFunction(){
   $('span').text('code here should only run when function count is complete');
}

if (current < number) {
    setTimeout(function () {
        count(Item)
    }, 0.1);
}
else{
   callFunction()
}

暂停脚本直到功能完成 - jquery

7 个答案: