Examples of the use of $watch and $timeout in Angularjs _angularjs

Objective

It is believed that the use of angular partners should be$watchfamiliar with this monitoring, it is mainly used to monitor the changes in the model, when your model part of the change it will notify you. In the recent platform management development, I also use this angular, in the filter can not avoid the use of$watchmonitoring. At that time my idea is to search the time does not need to click the Search button, so in the user experience is also excellent, to avoid the input and then click the operation steps.

And then, when it comes to listening, the$watchfirst code is this.

$scope. $watch (' Filteroptions ', function (newval, oldval) {
 if (newval!== oldval) {
 //filteroptions when changes occur, call method c7/> $scope. Getpageddataasync (' admin/bill/' + $stateParams. page+ ' pagecount= ' + $scope. Paginationconf.itemsperpage, $scope. filteroptions);
 }
, True);

In doing so, it doesn't look like a big problem, it pulls the data every time you enter it. But! But! But! The important thing to say three times! When the user input "John" This search word, the code is this way, "Zhang" word pull a data, "three" word has pulled a data. Well, this is still two words, if the input of 10 words, the server will cry, the server to hit the front.

This time you need to use the goods in the angular--$timeoutHe is a timer in the angular. For our search, when listening tofilterOptionschange, do not immediately request, give him a 0.8 seconds of a wait time, if this 0.8 secondsfilterOptionshave not changed again, then request pull data, or continue to enter.

The code is as follows:

$scope. $watch (' Filteroptions ', function (newval, oldval) {
 if (newval!== oldval) {
  if (timeout) $timeout. Cancel (timeout);
  Timeout = $timeout (function () {
  $scope. Getpageddataasync (' admin/bill/' + $stateParams. page+ '? pagecount= ' +$ Scope.paginationConf.itemsPerPage, $scope. filteroptions);
  },
 true);

Summarize

The above is the entire content of this article, I hope to be able to learn or work to bring certain help, if there is doubt you can message exchange.