javascript - 如何同时运行一个函数的 3 个实例

Question

我有一个名为 scan() 的函数。它被循环调用。然而，它目前的工作原理是:

1. 调用scan()
2. 等待scan()返回
3. 增加分钟
4. 重复

如何才能使其同时运行 scan() 的 2 个实例。我可以将 2 实例更改为 3 实例或 4 或 5 等。

示例:我希望它是怎样的(在下面的示例中，有 3 个 scan() 实例在任意一点运行及时。运行的扫描实例不应超过 3 个(相对于 while 循环条件)。

调用scan()并在后台等待返回值。一旦获得返回值，它就会增加 min 并调用 scan() 的另一个实例。始终有 3 个 scan() 实例在运行(相对于 while 循环条件)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<div class="display-error" style="display: none"></div>
<form>
  <label for="fname">Fruit (only correct input is: banana)</label><br>
  <input type="text" id="fruit-name" name="fruit" value="banana"><br>
  <button type="submit" id="submit" value="Submit">Submit</button>
</form>

<div id="results">
</div>

<script type="text/javascript">
$(document).ready(function() {


    $('#submit').click(function(e) {
        e.preventDefault();

        var fruitName = $("#fruit-name").val();

        $.ajax({
            type: "POST",
            url: "verify-input.php",
            dataType: "json",
            data: {
                fruitName: fruitName
            },
            success: function(data) {
                if (data.code == 200) {
                    $("#submit").html("Running Scan");
                    (async function() {
                        var fruitID = data.fruitId;
                        var min = 1;
                        while (min < 1000) {
                            await scan(fruitID, min, min + 30);
                            min = min + 30;
                        }
                    })();
                } else {
                    $(".display-error").html("<ul>" + data.msg + "</ul>");
                    $(".display-error").css("display", "block");
                }
            }
        });


    });
});

function scan(vFruitId, min, max) {

    return $.ajax({
        type: "POST",
        url: "scanner.php",
        dataType: "json",
        data: {
            vFruitId: vFruitId,
            min: min,
            max: max
        },
        success: function(data) {
            data.forEach((item, idx) => {
                $("#results").append(`
                <div class="fruit-item" data-item="${idx}">
                    <div class="f-calories">calories: ${item.sweetness}</div>
                    <div class="f-sweetness">sweeteness: ${item.calories}</div>
                    <div class="f-bitterness">bitterness: ${item.bitterness}</div>
                </div><br>
              `);
            })
        }
    });

}

</script>

Answer 1

这是您要同时运行的代码。

//...
while (min < 1000) {
  await scan(fruitID, min, min + 30);
  min = min + 30;
}
//...

目前正在同步运行。

有一个库抽象了限制并发操作的一些复杂性，它被称为 promise-throttle .

实现看起来类似于:

const promiseThrottle = new PromiseThrottle({
    requestsPerSecond: 5, // up to 5 requests per second.. This will adjust the request rate
    promiseImplementation: Promise, // the Promise library you are using
});

const scans = [];
// swapped while loop with for loop but it accomplishes effectively the same task
for (let i = 0; i < 1000; i += 30) {
    // closure in order to get correct value of i on each iteration.
    ((min) => {
        scans.push(promiseThrottle.add(() => scan(fruitId, min, min + 30)));
    })(i);
}

Promise.all(scans).then(res => {
    // res is an array of all responses from scans
    // scans completed
});

promise-throttle在抽象节流方面做得非常好，但 API 需要一秒钟才能适应..