JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        <button ng-click="decreasePage()">- Page</button>
        <button ng-click="increasePage()">+ Page</button> <pre>currentPageRequest = {{ currentPageRequest }}, actualCurrentPage = {{ actualCurrentPage }}</pre>

    </div>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $timeout, myFactory) {
    $scope.actualCurrentPage = 1;
    $scope.currentPageRequest = 1;

    function toPage() {
        if ($scope.actualCurrentPage != $scope.currentPageRequest) {
            myFactory.sendAjax($scope.currentPageRequest,$scope.latestID).success(function (data) {
                if ($scope.latestID === data.latestID) {
                    $scope.actualCurrentPage = data.page;
                }
            });
        }
    }

    $scope.decreasePage = function () {
        if ($scope.currentPageRequest > 1) {
            --$scope.currentPageRequest;
            $scope.latestID = new Date().getTime().toString();
            toPage();
        }
    };

    $scope.increasePage = function () {
        ++$scope.currentPageRequest;
        $scope.latestID = new Date().getTime().toString();
        toPage();
    };
});
app.factory('myFactory', function ($http) {
    var factory = {};
    factory.sendAjax = function (page,latestID) {
        return $http({
            method: 'POST',
            url: '/echo/json/',
            data: 'json=' + angular.toJson({
                page: page,
                latestID: latestID
            }) + '&delay=2'
        });
    };
    return factory;
});