reactiveUtils

方法概述

方法详细说明

on(getTarget, eventName, callback, options){WatchHandle}

侦听 getTarget 函数返回的值是否有更改，并根据需要自动添加或移除给定事件的事件监听器。

参数

getTarget ReactiveOnExpression 返回要添加事件监听器的对象的函数。

eventName String 要为其添加监听器的事件的名称。

callback ReactiveOnCallback 事件处理程序回调函数。

options ReactiveListenerOptions optional 用于配置追踪如何发生以及如何调用回调的选项。

返回

类型	描述
WatchHandle	侦听句柄。

示例

// Adds a click event on the view when it changes
reactiveUtils.on(
  () => view,
  "click",
  (event) => {
    console.log("Click event emitted: ", event);
  });

// Adds a drag event on the view and adds a callback
// to check when the listener is added and removed.
// Providing `once: true` in the ReactiveListenerOptions
// removes the event after first callback.
reactiveUtils.on(
  () => view,
  "drag",
  (event) => {
    console.log(`Drag event emitted: ${event}`);
  },
  {
    once: true,
    onListenerAdd: () => console.log("Drag listener added!"),
    onListenerRemove: () => console.log("Drag listener removed!")
  });

once(getValue, signal){Promise}

追踪 getValue 函数正在计算的所有属性。当 getValue 发生更改时，它将返回包含该值的 promise。此方法仅追踪单个更改。

参数

getValue ReactiveWatchExpression 要追踪的表达式。

signal AbortSignal optional 中止信号，可用于取消 Promise 的解析。

返回

类型	描述
Promise	当跟踪的表达式更改时进行解析的承诺。

示例

// Observe for the first time a property equals a specific string value
// Equivalent to watchUtils.once()
reactiveUtils.once(
  () => featureLayer.loadStatus === "loaded")
  .then(() => {
    console.log("featureLayer loadStatus is loaded.");
  });

// Use a comparison operator to observe for a first time
// difference in numerical values
const someFunction = async () => {
  await reactiveUtils.once(() => view.zoom > 20));
  console.log("Zoom level is greater than 20!");
}

// Use a comparison operator and optional chaining to observe for a
// first time difference in numerical values.
reactiveUtils.once(
  () => map?.allLayers?.length > 2)
  .then((value) => {
    console.log(`The map now has ${value} layers.`);
  });

watch(getValue, callback, options){WatchHandle}

追踪在 getValue 函数中访问的所有属性，并在其中任何属性更改时调用回调。

参数

getValue ReactiveWatchExpression 用于获取当前值的函数。将追踪所有访问的属性。

callback ReactiveWatchCallback 有变化时调用的函数。

options ReactiveWatchOptions optional 用于配置追踪如何发生以及如何调用回调的选项。

返回

类型	描述
WatchHandle	侦听句柄。

示例

// Watching for changes in a boolean value
// Equivalent to watchUtils.watch()
reactiveUtils.watch(
 () => view.popup.visible,
 () => {
   console.log(`Popup visible: ${visible}`);
 });

// Watching for changes within a Collection
reactiveUtils.watch(
 () => view.map.allLayers.length,
 () => {
   console.log(`Layer collection length changed: ${view.map.allLayers.length}`);
 });

// Watch for changes in a numerical value.
// Providing `initial: true` in ReactiveWatchOptions
// checks immediately after initialization
// Equivalent to watchUtils.init()
reactiveUtils.watch(
 () => view.zoom,
 () => {
   console.log(`zoom changed to ${view.zoom}`);
 },
 {
   initial: true
 });

// Watch properties from multiple sources
const handle = reactiveUtils.watch(
 () => [view.stationary, view.zoom],
 ([stationary, zoom]) => {
   // Only print the new zoom value when the view is stationary
   if(stationary){
     console.log(`Change in zoom level: ${zoom}`);
   }
 }
);

when(getValue, callback, options){WatchHandle}

侦听 getValue 函数返回的值，并在它变为真时调用回调。

参数

getValue ReactiveWatchExpression 用于获取当前值的函数。将追踪所有访问的属性。

callback ReactiveWatchCallback 当值变为真时调用的函数。

options ReactiveWatchOptions optional 用于配置追踪如何发生以及如何调用回调的选项。

返回

类型	描述
WatchHandle	侦听句柄。

示例

// Observe for when a boolean property becomes not truthy
// Equivalent to watchUtils.whenFalse()
reactiveUtils.when(
  () => !layerView.updating,
  () => {
    console.log("LayerView finished updating.");
  });

// Observe for when a boolean property becomes true
// Equivalent to watchUtils.whenTrue()
reactiveUtils.when(
  () => view?.stationary === true,
  async () => {
    console.log("User is no longer interacting with the map");
    await drawBuffer();
  });

// Observe a boolean property for truthiness.
// Providing `once: true` in ReactiveWatchOptions
// only fires the callback once
// Equivalent to watchUtils.whenFalseOnce()
reactiveUtils.when(
  () => !widget.visible,
  () => {
    console.log(`The widget visibility is ${widget.visible}`);
  },
  {
    once: true
  });

whenOnce(getValue, signal){Promise}

追踪 getValue 函数正在计算的所有属性。当 getValue 变为真时，它将返回包含该值的 promise。此方法仅追踪单个更改。

参数

getValue ReactiveWatchExpression 要追踪的表达式。

signal AbortSignal optional 中止信号，可用于取消 Promise 的解析。

返回

类型	描述
Promise	当追踪的表达式变为真时，进行解析的 promise。

示例

// Check for the first time a property becomes truthy
// Equivalent to watchUtils.whenOnce()
reactiveUtils.whenOnce(
  () => view.popup?.visible)
  .then(() => {
    console.log("Popup used for the first time");
  });

// Check for the first time a property becomes not truthy
// Equivalent to watchUtils.whenFalseOnce()
const someFunction = async () => {
  await reactiveUtils.whenOnce(() => !layerview.updating));
  console.log("LayerView is no longer updating");
}

// Check for the fist time a property becomes truthy
// And, use AbortController to potentially cancel the async callback
const abortController = new AbortController();

// Observe the View's animation state
reactiveUtils.whenOnce(
  () => view?.animation, abortController.signal)
  .then((animation) => {
    console.log(`View animation state is ${animation.state}`)
  });

// Cancel the async callback
const someFunction = () => {
  abortController.abort();
}

类型定义

ReactiveEqualityFunction(newValue, oldValue){Boolean}

用于检查两个值是否相同的函数，在此情况下不调用 watch 回调。

参数

newValue * 新值。

oldValue * 旧值。

返回

类型	描述
Boolean	新值是否等于旧值。

ReactiveListenerChangeCallback(target)

添加或移除事件监听器时要调用的回调。

参数

target * optional 添加或从中移除监听器的事件目标。

ReactiveListenerOptions Object

用于配置 reactiveUtils 行为的选项。

属性

sync Boolean optional 是同步触发回调还是在下一个滴答时触发。

once Boolean optional 是否只触发一次回调。

onListenerAdd ReactiveListenerChangeCallback optional 添加事件监听器时调用。

onListenerRemove ReactiveListenerChangeCallback optional 移除事件监听器时调用。

ReactiveOnCallback(event)

发出或分派事件时调用的函数。

参数

event * 目标发出的事件。

ReactiveOnExpression(){*}

自动跟踪的函数，应返回要添加事件监听器的事件目标。

返回

类型	描述
*	事件目标。

ReactiveWatchCallback(newValue, oldValue)

值更改时要调用的函数。

参数

newValue * 新值。

oldValue * 旧值。

ReactiveWatchExpression(){*}

自动跟踪的函数，应返回一个值以传递给 ReactiveWatchCallback

返回

类型	描述
*	新值。

ReactiveWatchOptions Object

用于配置如何执行自动跟踪以及如何调用回调的选项。

属性

initial Boolean optional 如果满足必要条件，是否在初始化后立即触发回调。

sync Boolean optional 是同步触发回调还是在下一个滴答时触发。

once Boolean optional 是否只触发一次回调。

equals ReactiveEqualityFunction optional 用于检查两个值是否相同的函数，在此情况下不调用回调。