カスタムページ遅延トリガー (手ぶれ補正debounce)

このケースは、三者の開発者「peng」から来ています

適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。

• 検索ボックス入力モニター: ユーザーが検索ボックスにテキストを入力すると、通常、自動補完または提案を検索する機能がトリガーされます
• スクロールイベント処理: 長いリストのスクロールでより多くのコンテンツがロードされたり、無限スクロールや固定ヘッド/サイドバーなどのシーンでは、スクロールイベントが頻繁にトリガーされやすい
• ボタンのコンボ防止: フォームを送信したり、商品をショッピングカートに追加したり、その他の重要な操作を実行したりするボタンをクリックすると、複数回送信される可能性があります

前提条件

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• ページ設定のカスタマイズ

このチュートリアルでは、web開発技術を使用しています。まず、次の技術を理解することができます。

• 手ぶれ補正

効果を実現する

実装手順

カスタムページの作成

キャンバス領域で次のコンポーネントをドラッグします。

• 単一行テキスト: 手ぶれ補正なしと命名
• 単一行テキスト: 手ぶれ補正ありと命名
• 複数行のテキスト: 複数行のテキストに名前を付けます
• 複数行のテキスト: 複数行のテキストに名前を付けます

手ぶれ補正関数の設定

変数を追加し、という名前を付けますDebouncetimerデフォルト値Null。

「手ぶれ補正」フィールドにonchangeアクションをバインドし、次の関数をバインドすると、関数はページjsパネルに直接コピーできます。フィールドの一意のidを変更することに注意してください。

// 有防抖 onChange
export function onChangeWithDebounce({ value }) {
  if (this.state.debounceTimer) {
    clearTimeout(this.state.debounceTimer);
  }
  const debounceTimer = setTimeout(() => {
    console.log('有防抖', value);
    this.$('textareaField_l9qggl4i').setValue(this.$('textareaField_l9qggl4i').getValue() + value + '\n');
    this.setState({
      debounceTimer: null,
    });
  }, 500);
  this.setState({
    debounceTimer,
  });
}

「手ぶれ補正なし」フィールドにonchangeアクションをバインドし、次の関数をバインドすると、関数はページjsパネルに直接コピーできます。フィールドの一意のidを変更することに注意してください。

// 无防抖 onChange
export function onChangeWithoutDebounce({ value }) {
  console.log('无防抖', value);
  this.$('textareaField_l9qggl4g').setValue(this.$('textareaField_l9qggl4g').getValue() + value + '\n');
}

保存ページ

オンラインで試遊する