Javascript 暂停脚本直到函数完成-jquery

我有一个简单的计数函数，在输入字段中增加一个数字。这正是我想要的工作方式。唯一的问题是，我有一个带有多个函数的长JS脚本，我只希望脚本在

count（）

函数完成后继续运行

JSFIDDLE

var编号=1500；
var aValue=300；
功能计数（项目）{
无功电流=有效电流；
项目价值（价值+=1）；
如果（当前<数字）{
setTimeout（函数（）{
计数（项目）
}, 0.1);
}
}
计数（$（“.input”）；
//脚本的其余部分应仅在上述函数完成后运行
$（'span'）.text（'此处的代码应仅在函数计数完成时运行'）；

setTimeout by design异步运行，因此只要调用它，您就可以允许代码继续处理，并在setTimeout代码准备就绪时返回到它（它决定何时，而不是您）

为了在JavaScript中实现这一点，您需要将代码的其余部分封装在一个函数中，直到count函数完成后才调用该函数

---

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

您需要的是回调。我确信您使用过回调，例如在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
});

函数计数（项，回调）{//新参数
无功电流=有效电流；
项目价值（价值+=1）；
如果（当前<数字）{
setTimeout（函数（）{
count（Item，Callback）//在递归调用中传递它
}, 0.1);
}否则{
Callback（）；//在循环结束时调用它
}
}
count（$（“.input”），function（）{//在此处编写回调代码
//这将在计数后执行
});

需要异步处理，需要时调用回调函数

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');
}

var编号=1500；
var aValue=300；
功能计数（项目）{
无功电流=有效电流；
项目价值（价值+=1）；
如果（当前<数字）{
setTimeout（函数（）{
计数（项目）
}, 0.1);
}否则{
restFunctionCalled（）；//从这里调用回调函数。
}
}
计数（$（“.input”）；
函数restFunctionCalled（）{
$（'span'）.text（'此处的代码应仅在函数计数完成时运行'）；
}

试试这个：

var编号=1500；
var aValue=300；
功能计数（项目）{
无功电流=有效电流；
项目价值（价值+=1）；
如果（当前<数字）{
setTimeout（函数（）{
计数（项目）
}, 0.1);
}否则{
回调（）；
}
}
计数（$（“.input”）；
函数回调（）{
$（'span'）.text（'此处的代码应仅在函数计数完成时运行'）；
}

如果可以删除异步调用：

var number = 1500;
var aValue = 300;

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

    }
}

count($(".input"));

var编号=1500；
var aValue=300；
功能计数（项目）{
无功电流=有效电流；
而（当前
var编号=1500；
var aValue=300；
功能计数（项目）{
无功电流=有效电流；
项目价值（价值+=1）；
如果（当前<数字）{
setTimeout（函数（）{
计数（项目）
}, 0.1);
}
如果（当前==数量）{
$（'span'）.text（'此处的代码应仅在函数计数完成时运行'）；
}
}
计数（$（“.input”）；
有两个选项可供您模拟睡眠或封装代码的其余部分，并在功能完成时给您打电话（建议使用第二个选项）

函数睡眠（毫秒）{
var startTime=new Date（）.getTime（）；//获取当前时间
while（new Date（）.getTime（）

或

function callFunction（）{
$（'span'）.text（'此处的代码应仅在函数计数完成时运行'）；
}
如果（当前<数字）{
setTimeout（函数（）{
计数（项目）
}, 0.1);
}
否则{
callFunction（）
}
似乎就是这样，只是用我的脚本进行测试-从来没有想过回拨。唯一的原因是他可能想要设置正在更改的号码的动画。为什么需要异步调用？仅供参考，setTimeout的延迟参数只是一个整数，而不是浮点数，不过，您可以修改它
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');
}

var number = 1500;
var aValue = 300;

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

    }
}

count($(".input"));

 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"));

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()
}