Angular 根据鼠标在游览器中的事件开启或关闭一个定时任务

       在展示产品信息过程中，有些产品的状态可能需要经常刷新。

       比如：在云计算中云主机的展示页面中云主机的状态随时可能发生改变，而且有些操作会有延时。如关机操作，在发送完关机指令后，可能需要过几十秒才能真正的关闭，此时展示页面的状态还是关机前的状态，只有在用户手动刷新游览器后才会改变。这个时候需要一个定时获取状态的功能，来时时刷新状态。

       当用户过多时这种定时的请求会多服务器带来不必要的开销，这时我们需要监听用户鼠标操作来启动还是关闭定时获取状态的功能。

下面用我在项目中的一个实例来介绍如何实现

文件名：auto-refresh-status.directive.ts

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appAutoRefreshStatus]'
})
export class AutoRefreshStatusDirective {
  /*
   * 自动刷新状态
   * 使用方法:
   * 在要实现自动刷新的 div 中添加 如下
   * <div appAutoRefreshStatus (autoRefreshStatusData)="refreshCloudServerStatus()">
   *
   * appAutoRefreshStatus 为功能模块名
   * (autoRefreshStatusData) 回调函数
   *
   * 原理：
   *     当鼠标在 div 中点击后调用startAutoRefreshStatus函数
   *     当 window 离开时调用stopAutoRefreshStatus函数
   */

  autoStatusInterval;
  isRunning = false;
  @Output() autoRefreshStatusFunc = new EventEmitter<any>();
  constructor() { }

  autoRefreshStatus() {
    this.autoStatusInterval = setInterval(() => {
      this.autoRefreshStatusFunc.emit();
    }, 8000);
  }

  @HostListener('mouseenter')
  startAutoRefreshStatus() {
    if (this.isRunning === false) {
      this.autoRefreshStatus();
      this.isRunning = true;
    }
  }

  @HostListener('window:blur')
  stopAutoRefreshStatus() {
    clearInterval(this.autoStatusInterval);
    this.isRunning = false;
  }

}

在实现定时任务和监控鼠标的操作中我们需要三个关键的方法

1. HostListener(eventName, agrs) --- 监听事件

参数说明：

示例：

  @HostListener('click', ['123'])
  onClick(content) {
    console.log(content);
  }

2. setInterval(code, millisec) --- 定时执行任务(JavaScript 的方法)

参数说明：

示例：

var res = setInterval("clock()", 50)

3. clearInterval(id_of_setinterval) --- 清空定时任务(JavaScript 的方法)

参数说明：

示例：

setInterval(res)