在分頁頁面上，如何阻止javascript自動加載？

Question

基本上，我有javascript每2秒刷新一次訂單表。 它查詢一個名為“ autoload”的路由，該路由會在OrdersController中觸發一個名為autoloadOrders的方法。 控制器僅返回部分刀片文件的視圖，其中包含表的循環（傳遞了必要的變量）。

我的問題是，刷新工作正常並且表自動更新。 但是對於分頁，當我單擊到下一頁時，它將每2秒自動恢復到第一頁數據。 分頁后如何阻止這種情況發生？

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::get('autoload', 'OrdersController@autoloadOrders')->name('autoload');

Answer 1

我用這個解決了

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

            });