Unable to handle a function on browser refresh

When I click refresh, I want to run a function which I am unable to.

The refresh should be handled only when there are unsaved changes.

var timer;      
var isNavigation = false;
$window.onbeforeunload = function(evt) {
    isNavigation = true;
    debugger;
    if ($rootScope.isReviewFormSubmitEnabled) {
        debugger;
        var message = ' ';
        timer = $timeout(stayOnPage, 100);
        evt = evt || window.evt;
        evt.returnValue = message;
        return message;

        //Handling leave click on leave/stay option
        $window.onunload = function() {
            debugger;
            $appTimeOutService.stopTimeOut();
            relaseReviewLock();
        }

        //Handling cross click, stay click , don't reload click 
        function stayOnPage() {
            debugger;
            alert("You've been trolled!");
            angular.element(".core-fieldblock-overlay").css('display', 'none');
        }
    } else {
        $appTimeOutService.stopTimeOut();
        relaseReviewLock();
    }
}

Handling browser back button and route changes:

var isNavigation = true;
$scope.$on('$locationChangeStart', function(event, next, current) {
    if ($rootScope.isReviewFormSubmitEnabled && isNavigation) {
        debugger;
        alert("FU!!");
        var answer = confirm('Are you sure you want to navigate away from this page');
        if (!answer) {
            event.preventDefault();
        } else {
            $appTimeOutService.stopTimeOut();
            relaseReviewLock();
        }
    } else if (!isNavigation && $rootScope.fromInspectSubmission) {
        $appTimeOutService.stopTimeOut();
        relaseReviewLock();
    }
});

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/03/unable-to-handle-a-function-on-browser-refresh/
via @lzomedia #developer #freelance #web #lzomedia.com