具有延时功能的输入触发器,当输入值发生变化时等待

Input trigger with delay function, wait if input value changes

本文关键字:输入 等待 变化 触发器 功能      更新时间:2023-09-26

我正在构建一个角指令,它在输入值更改上运行一个函数,我想在运行此函数之前等待300ms,但如果值在300ms之前发生变化,我需要将延迟重置为300ms。因此,只有当值改变300ms时,函数才应该运行:

我的代码

(function() {
    'use strict';
    angular
    .module('address',[])
    .directive('address', ['Address', function (Address) {
      return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'partials/address.html',
        link: function (scope, elem, attrs) {
            var delay = "300";
            scope.$watch('searchparam', function(){
                if(!_.isUndefined(scope.searchparam) && scope.searchparam.length >= 3) {
                    // here i need some delay timer
                    Address.get(scope.searchparam).then(function(data){
                        console.log("data: ", data);
                        scope.addressList = data;
                    }, function(status){
                        console.log("status: ", status);
                        scope.errorHandler = status;
                    });
                }
            }); 
        }
      };
    }]);
})();

地址。Get是一个异步服务,返回地址

你要做的是看看是否有问题。它包含在大多数JS库中。从AngularJS 1.3开始

您需要这样的内容:

var delay = "300"; // not needed, just pointing where to put the rest of the code :)
var timeout;
scope.$watch('searchparam', function(){
    if(!_.isUndefined(scope.searchparam) && scope.searchparam.length >= 3) {
        function getAddress() {
            // do you stuff - Address.get(...
        }
        if (timeout) // try to clear the timeout if it was previously set
            clearTimeout(getAddress);
        timeout = setTimeout(getAddress, 300); // reset timer