如何正确使用多个setInterval以不同的间隔运行不同的功能？

Question

我已经建立了一个网页，可以在为Raspberry Pi建立的数字日历上运行。该网页包含2个日历供稿，当前天气和时间/日期。

我遇到的问题是我将每个功能设置为以不同的时间间隔运行，但是几个小时后网页冻结了。我仍然可以通过SSH进入树莓派并使用树莓派，但是网页没有响应。

间隔的基础设置如下：

// Update time every 1 second using MomentJS
setInterval(updateTime, 1000);

// Update background every 10 seconds
setInterval(randombg, 10000)

// Update Calendar every 30 seconds
setInterval(calendarRefresh, 30000)

感谢您的帮助，欢呼

以下根据要求提供的完整代码：

var app = angular.module('SmartCal', []);

app.controller('myCtrl', function ($scope, $http, $interval) {

    //=========================
    // Backgrounds
    //=========================
    $scope.randombg = function () {
        $('body').css('background', 'linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(images/' + Math.floor((Math.random() * 150) + 1) + '.jpg)')

    }

    setInterval(function () {
        $scope.randombg();
    }, 10000)
    $scope.randombg();

    //=========================
    // Clock
    //=========================

    const weekdayName = $('.weekdayName');
    const dateNumber = $('.dateNumber');
    const month = $('.month');
    const year = $('.year');
    const time = $('.time');


    function update() {
        weekdayName.html(moment().format('dddd'));
        dateNumber.html(moment().format('D'));
        month.html(moment().format('MMMM'));
        year.html(moment().format('YYYY'));
        time.html(moment().format('h:mm:ss a'));
    }

    setInterval(update, 1000);


    //=========================
    // Get Calendars
    //=========================

     const calendar = $('#calendar');
     const calendarlist = $('#calendarlist');

    $scope.getCalendar = function () {
        calendar.fullCalendar({
            eventSources: [{
                    googleCalendarApiKey: '#',
                    googleCalendarId: '#'
                },
                {
                    googleCalendarApiKey: '#',
                    googleCalendarId: '#'
                }
            ],
            defaultView: 'month',
            height: 500,
            header: false
        });

        calendarlist.fullCalendar({
            eventSources: [{
                    googleCalendarApiKey: '#',
                    googleCalendarId: '#'
                },
                {
                    googleCalendarApiKey: '#',
                    googleCalendarId: '#'
                }
            ],
            defaultView: 'list',
            duration: {
                days: 30
            },
            height: 400,
            header: false
        });
    }

    //=========================
    // Calendar Refresh
    //=========================
    $scope.calendarRefresh = function () {
        calendar.fullCalendar('refetchEvents')
        calendarlist.fullCalendar('refetchEvents')
    }

    //=========================
    // Init
    //=========================

    $scope.getCalendar();

    $interval(function () {
        $scope.calendarRefresh();
    }, 30000);

});