Javascript Array.splice 在我的 Angular 项目中停止正常工作

Question

I was working on a project in Angular 4 and needed to batch through an array of ids. I would send the removed items to an Observable function, and when the subscription returned I would check the remaining array before looping the batch.

The first time I did this it worked perfectly, the original array was reduced over time to zero items. The second time I did this it no longer worked. Every time the subscription returns the original array was suddenly full again.

The original array was an element of the component that was making the subscription.

RemoveItemsArray : Array<number>;

I had an event handler function initializing the values and calling the batch function.

HandleActions( action, payload )
{
    switch( action )
    {
        case “finish”:
            DoSomething();
            break;
        case “remove”:
            this.RemoveItemsArray = payload.items;
            this.ProcessRemoveItems();
            break;
    }
}

The Batching function would console log the array being correctly sized before the API function was called. Then in the response suddenly all the items were back and therefore it became an infinite loop.

ProcessRemoveItems()
{
    let executeItems = this.RemoveItemsArray.splice(0, 10);
    this.service.RemoveItemsAPI( executeItems )
        .subscribe ( response =>  {
            if( response.StatusCode == 200 )
            {
                if( this.RemoveItemsArray.length > 0 )
                {
                    this.ProcessRemoveItems();
                }
                else
                {
                    this.HandleAction(“finish”,null);
                }
            }
        });
}

Answer 1

Most likely you're modifying the array elsewhere in the middle of draining it.

You'll want to make a copy of the array if this is the case. I can't tell from the given code what modifications are being made, so all I can do is give you a couple guesses.

Solution 1: Copy payload.items to RemoveItemsArray .

This assumes RemoveItemsArray is not modifed during draining

HandleActions( action, payload )
{
    switch( action )
    {
        case “finish”:
            DoSomething();
            break;
        case “remove”:
            this.RemoveItemsArray = [...payload.items];
            this.ProcessRemoveItems();
            break;
    }
}

Solution 2: Pass an all new array to ProcessRemoveItems

HandleActions( action, payload )
{
    switch( action )
    {
        case “finish”:
            DoSomething();
            break;
        case “remove”:
            this.RemoveItemsArray = payload.items;
            this.ProcessRemoveItems([...payload.items]);
            break;
    }
}

ProcessRemoveItems(items)
{
    let executeItems = items.splice(0, 10);
    this.service.RemoveItemsAPI( executeItems )
        .subscribe ( response =>  {
            if( response.StatusCode == 200 )
            {
                if( items.length > 0 )
                {
                    this.ProcessRemoveItems(items);
                }
                else
                {
                    this.HandleAction(“finish”,null);
                }
            }
        });
}