Angular.js和Vue.js函数去抖示例有何不同？

在Web开发中,函数去抖（debounce）是一种优化技术，用于限制函数在短时间内频繁触发时的执行次数，在Angular.js和Vue.js两大主流框架中，实现函数去抖的方式各有特点，本文将通过示例代码对比两者的实现方法，并分析其适用场景。

函数去抖的基本原理

函数去抖的核心思想是：在事件被触发后等待一段时间，如果在这段时间内事件没有被再次触发，才执行目标函数；如果事件被重复触发，则重新计时，这种机制常用于处理窗口大小调整、输入框实时搜索等高频触发事件，避免不必要的性能消耗。

Angular.js中的函数去抖实现

Angular.js通过$timeout服务和自定义指令实现函数去抖，以下是具体示例：

使用$timeout服务

angular.module('app').controller('ExampleController', function($scope, $timeout) {
  $scope.searchInput = '';
  let debounceTimer;
  $scope.handleSearch = function() {
    $timeout.cancel(debounceTimer);
    debounceTimer = $timeout(function() {
      console.log('搜索内容：', $scope.searchInput);
    }, 300);
  };
});

通过自定义指令封装

angular.module('app').directive('debounce', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      let debounceTimer;
      element.on('input', function() {
        $timeout.cancel(debounceTimer);
        debounceTimer = $timeout(function() {
          scope.$apply(attrs.debounce);
        }, 300);
      });
    }
  };
});

使用方式：

<input type="text" ng-model="searchInput" debounce="handleSearch()">

Vue.js中的函数去抖实现

Vue.js提供了更灵活的实现方式，可以通过自定义指令、混入（mixin）或直接结合工具函数完成。

使用Lodash工具库

import { debounce } from 'lodash';
export default {
  data() {
    return {
      searchInput: ''
    };
  },
  methods: {
    handleSearch: debounce(function() {
      console.log('搜索内容：', this.searchInput);
    }, 300)
  }
};

自定义指令实现

Vue.directive('debounce', {
  inserted: function(el, binding, vnode) {
    const delay = binding.value || 300;
    const handler = binding.expression;
    let debounceTimer;
    el.addEventListener('input', function() {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(function() {
        vnode.context[handler]();
      }, delay);
    });
  }
});

使用方式：

<input type="text" v-model="searchInput" v-debounce="handleSearch">

两种框架实现对比

适用场景建议

• Angular.js：适合已采用Angular生态的项目，尤其是需要统一管理DOM事件和依赖注入的场景。
• Vue.js：适合中小型项目或需要快速迭代的应用，结合Lodash等工具库能显著提升开发效率。

注意事项

1. 内存泄漏：在组件销毁时需清除定时器，避免内存泄漏（Angular.js可通过$scope.$on('$destroy')清理，Vue.js需在beforeDestroy中处理）。
2. 延迟时间选择：根据业务场景调整延迟时间（如搜索建议300ms，窗口调整200ms）。
3. 事件绑定：确保去抖函数绑定在正确的事件上（如input、scroll等）。

通过对比可见,Angular.js和Vue.js均能高效实现函数去抖，开发者可根据项目需求和技术栈选择合适方案，核心是理解去抖的本质，并在实际应用中平衡性能与用户体验。