延时监测:当input内容不再变化时请求模糊查询

input绑定selectUrl这一变量

 <input  ng-model="selectUrl" placeholder="测试实时刷新" >

外部定义timeout,当监测的input框内值改变时,首先调起timeout=$timeout(function(){........})

当输入框内继续输入内容,且距离上次值改变不足1200ms时,说明这一次的输入并未结束,此时仍然会watch到selectUrl值变化,执行scope.watch,但此时 timeout为真,因此执行 $timeout.cancel(timeout)取消上次的timeout,并重新设置新的timeout,即刷新倒计时恢复1200ms。

只有当输入框结束输入,并且过去1200ms后,才会执行查询请求

let timeout;

                $scope.$watch('selectUrl', function(oldValue,newValue){
                    if(oldValue === newValue) return;
                    if(timeout) {
                        $timeout.cancel(timeout);
                    }
                    timeout=$timeout(function() {
                        //如下为需要执行的功能,如模糊查询请求等。
                        if($scope.selectUrl === ''){
                            $scope.currentUrl = $scope.assertUrl +  "*";
                        }else{
                            $scope.currentUrl = $scope.assertUrl + $scope.selectUrl;
                        }
                        $scope.routeJump($scope.currentUrl, $scope.currentPeriod,$scope.chosenUrl);

                    }, 1200);
                });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,088评论 0 29
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,931评论 2 17
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,509评论 0 5
  • Angular 笔记 Angularjs 中 ui-sref 和 $state.go 如何传递参数 ng-repe...
    神刀阅读 594评论 0 1
  • 《ilua》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 1...
    叶染柒丶阅读 11,072评论 0 11