Return value inside a 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?

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.

This is the application:

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

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

回答1:

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

Using a promise it would look like this:

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

    return promise;
}

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

    var promise = new Promise();
    setTimeout(function () { promise.resolve("hello"); }, 1000);

    return promise;
  })
  .then(function (y) {
    console.log(y); // "hello" after 1000 milliseconds
  });

Edit: Added pseudo-example for promise creation

Edit2: Using two promises

回答2:

Try to get a callback to your git function.

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

var x = git(5,console.log); // you passed the function you want to execute in second paramenter