Разница между setTimeout в JavaScript и службой $timeout в angularjs

Question

Я новичок в угловой платформе. Вот мой сценарий, где я хочу изменить свою переменную $scope.variable через некоторое время, поэтому я использовал javascript setTimeout метод.

$scope.variable='Previous';

setTimeout(function(){
$scope.variable='NEXT';
},3000);

Этот код не работает для меня. я использовал $apply() чтобы этот код работал.

Позже я узнал, что у angular есть служба $timeout, которая выполняет ту же работу.

$scope.variable='Previous';
        $timeout(function () {
            $scope.variable='NEXT';
    }, 2000);

Как я могу сравнить производительность $timeout сервис с JavaScript setTimeout??

Почему мы должны использовать $timeout вместо setTimeout??

Пожалуйста, дайте мне несколько примеров и причин, чтобы использовать его, который показывает производительность.

Спасибо:)

Answer 1

В некоторых случаях нужно выполнить какую-то операцию тайм-аута, и мы часто добиваемся этого с помощью JavaScript. setTimeout() функция.

Тем не менее, если мы используем setTimeout() в приложении AngularJS нам также нужно использовать $scope.$apply() чтобы гарантировать, что любые изменения в scope будет отражено в другом месте (то есть с привязкой к данным в view).

AngularJS предоставляет удобную обертку для этого: $timeout() - это делает $apply() за что нам не нужно $apply перемены.

По поводу производительности.

Если вы используете $timeout чтобы создать то, что по сути является интервалом, то не используйте его. Если ваше приложение большое, то $apply также вызовет $digest цикл, который вы, возможно, не хотите, чтобы это произошло, наверняка снизит производительность.

Answer 2

Любая переменная области видимости AngularJS при обработке извне (включая ajax) нуждается в $ apply ().

$timeout() заботится о текущей области и запускается в том же цикле дайджеста после того, как все обнаружение изменений сделано.

Одна из прелестей $timeout(), которую я недавно обнаружил, заключается в том, что если вы не передадите параметр time, он будет ждать завершения DOM.

Так,

$timeout(function(){
  console.log("show after directive partial loaded")
}); //note, no time parameter

Запустите этот код в директиве, и функция обратного вызова по тайм-ауту будет запущена после того, как директива будет загружена частичное

Надеюсь это поможет.