在分页页面上，如何阻止javascript自动加载？

Question

Basically, I have javascript refreshing a table of orders every 2 seconds. It queries a route called 'autoload' which triggers a method called autoloadOrders in the OrdersController. The controller simply returns a view of a partial blade file with the loop for the table in it (with necessary variables being passed).

My question is, the refreshing works fine and the table auto-updates. But for pagination, when I click to the next page, it auto-reverts back to the first page data every 2 seconds. How can I stop that from happening once I'm going through the pagination?

welcome.blade.php

<script>
            $(document).ready(function() {
                setInterval(function() {
                    $('#autoload').load('{{ route('autoload') }}');
                }, 2000);
            });
        </script>
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">Dashboard</h1>
        </div>

        <h2>View Orders</h2>
        <div class="table-responsive" id="autoload">
            <table class="table table-striped table-sm">
                <thead>
                <tr>
                    <th>id</th>
                    <th>phone</th>
                    <th>address</th>
                    <th>order</th>
                    <th>price</th>
                    <th>delivered</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($orders as $order)

                <tr>
                    @if ($order->delivered == false)
                    <td>{{$order->id}}</td>
                    <td>{{$order->phone}}</td>
                    <td>{{$order->address}}</td>
                    <td>{!! nl2br($order->products) !!}</td>
                    <td>${{$order->price}}</td>
                        @if ($order->pickup == true)
                            <td><a href="/admin/orders/pickup/{{$order->id}}">Pickup</a></td>
                        @else
                            <td><a href="/admin/orders/deliver/{{$order->id}}">No</a></td>
                            @endif

                     @endif
                </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        {{$orders->links()}}

autoload.blade.php

<div class="table-responsive" id="autoload">
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>id</th>
            <th>phone</th>
            <th>address</th>
            <th>order</th>
            <th>price</th>
            <th>delivered</th>
        </tr>
        </thead>
        <tbody>
        @foreach ($orders as $order)

            <tr>
                @if ($order->delivered == false)
                    <td>{{$order->id}}</td>
                    <td>{{$order->phone}}</td>
                    <td>{{$order->address}}</td>
                    <td>{!! nl2br($order->products) !!}</td>
                    <td>${{$order->price}}</td>
                    @if ($order->pickup == true)
                        <td><a href="/admin/orders/pickup/{{$order->id}}">Pickup</a></td>
                    @else
                        <td><a href="/admin/orders/deliver/{{$order->id}}">No</a></td>
                    @endif

                @endif
            </tr>
        @endforeach
        </tbody>
    </table>

OrdersController

public function autoloadOrders(Orders $orders)
    {
        return view('admin.partials.autoload')->with(['orders' => $orders->getUndeliveredOrders()]);
    }

Route:

Route::get('autoload', 'OrdersController@autoloadOrders')->name('autoload');

Answer 1

I solved it with this

function getParameterByName(name, url) {
                if (!url) url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }
            $(document).ready(function() {


                var check = getParameterByName('page');
                if ((check === '1') || (check === null)) {
                    var autoLoad = setInterval(function() {
                        $('#autoload').load('{{ route('autoload') }}');
                    }, 2000);
                } else {clearInterval(autoLoad);}

            });