setInterval 内的返回值 [英] Return value inside a setInterval

问题描述

我想在 setInterval 中返回一个值.我只想执行一些有时间间隔的事情，这就是我尝试过的:

I want to return a value inside a setInterval. I just want to execute something with time interval and here's what I've tried:

function git(limit) {
    var i = 0;
    var git = setInterval(function () {
        console.log(i);
        if (i === limit - 1) {
            clearInterval(git);
            return 'done';
        }
        i++;
    }, 800);
}

var x = git(5);
console.log(x);

而且它不起作用.还有其他方法吗?

And it's not working. Is there any other way?

我要做的是为特定时间间隔制作动画.然后当我达到极限时(例如 5x 闪烁 $().fadeOut().fadeIn())，我想返回一个值.

What I'm going to do with this is to do an animation for specific time interval. Then when i reached the limit (ex. 5x blink by $().fadeOut().fadeIn()), I want to return a value.

这是应用程序:

function func_a(limit) {
    var i = 0;
    var defer = $.Deferred();
    var x = setInterval(function () {
        $('#output').append('A Running Function ' + i + '<br />');

        if (i == limit) {
            $('#output').append('A Done Function A:' + i + '<br /><br />');
            clearInterval(x);
            defer.resolve('B');
        }
        i++;

    }, 500);
    return defer;
}

function func_b(limit) {
    var c = 0;
    var defer = $.Deferred();
    var y = setInterval(function () {
        $('#output').append('B Running Function ' + c + '<br />');

        if (c == limit) {
            $('#output').append('B Done Function B:' + c + '<br /><br />');
            clearInterval(y);
            defer.resolve('A');
        }
        c++;

    }, 500);
    return defer;
}

func_a(3).then( func_b(5) ).then( func_a(2) );

这不是很好，它应该打印 A,A,A,Done A,B,B,B,B,B,Done B,A,A,Done A 但在这里被打乱了，似乎延迟 运行所有功能不是一个接一个 而是同时运行.这就是我问这个问题的原因，因为我想在我的 if...

This is not functioning well, it should print A,A,A,Done A,B,B,B,B,B,Done B,A,A,Done A but here it is scrambled and seems the defer runs all function not one after the other but simultaneously. That's why I asked this question because I want to return return defer; inside my if...

if (i == limit) {
     $('#output').append('A Done Function A:' + i + '<br /><br />');
     clearInterval(x);
     defer.resolve('B');
     // planning to put return here instead below but this is not working
     return defer;
}

推荐答案

你希望它等到间隔结束吗?这对运行时来说将是一个真正的痛苦，你会阻止整个页面.现在 JS 中的很多东西都是异步的，所以你必须使用回调、promise 或类似的东西:

Do you expect it to wait until the interval ends? That would be a real pain for the runtime, you would block the whole page. Lots of thing in JS are asynchronous these days so you have to use callback, promise or something like that:

function git(limit, callback) {
    var i = 0;
    var git = setInterval(function () {
        console.log(i);
        if (i === limit - 1) {
            clearInterval(git);
            callback('done');
        }
        i++;
    }, 800);
}

git(5, function (x) {
  console.log(x);
});

使用 Promise 会如下所示:

Using a promise it would look like this:

function git(limit, callback) {
    var i = 0;
    return new Promise(function (resolve) {
        var git = setInterval(function () {
            console.log(i);
            if (i === limit - 1) {
                clearInterval(git);
                resolve('done');
            }
            i++;
        }, 800);
    });
}

git(5)
  .then(function (x) {
    console.log(x);

    return new Promise(function (resolve) {
        setTimeout(function () { resolve("hello"); }, 1000);
    });
  })
  .then(function (y) {
    console.log(y); // "hello" after 1000 milliseconds
  });

添加了用于创建承诺的伪示例

Added pseudo-example for promise creation

编辑 2:使用两个承诺

Edit 2: Using two promises

编辑 3:修复 promise.resolve

Edit 3: Fix promise.resolve

这篇关于setInterval 内的返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！