TypeScript debounce.debounce函数代码示例

export default function studyListView(ctrl: StudyListCtrl) {
  return h('div.study-pagerWrapper', [
    h('div.study-pagerSubHeader.subHeader', [
      ctrl.state.showSearch ?
        h('form.study-pagerSearchWrapper', {
          onsubmit: ctrl.onSearch
        }, [
          h('div.inputWrapper', [
            h('input#studySearch[type=search]', {
              placeholder: 'Search studies',
              autocapitalize: 'off',
              autocomplete: 'off',
              oncreate: helper.autofocus,
              value: ctrl.q,
              oninput: debounce((e: Event) => {
                const val = (e.target as HTMLInputElement).value.trim()
                ctrl.canCancelSearch(val.length > 0)
                redraw()
              }, 200, { leading: true, trailing: true })
            }),
            ctrl.state.canCancelSearch ? h('div.cancel', {
              oncreate: helper.ontap(ctrl.cancelSearch)
            }, closeIcon) : null,
          ]),
          h('button', 'Search'),
        ]) :
        h('div.study-pagerSelectWrapper', [
          h('div.categories',
            h('select.study-pagerSelect', {
              value: ctrl.cat,
              onchange: ctrl.onCatChange,
            }, categories.map(c =>
              h('option', {
                key: c[0],
                value: c[0],
              }, c[1])
            ))
          ),
          h('div.orders',
            h('select.study-pagerSelect', {
              value: ctrl.order,
              onchange: ctrl.onOrderChange,
            }, orders.map(o =>
              h('option', {
                key: o[0],
                value: o[0],
              }, o[1])
            ))
          ),
        ]),
      h('div.study-pagerToggleSearch.fa.fa-search', {
        oncreate: helper.ontap(ctrl.toggleSearch)
      }),
      h('div.main_header_drop_shadow')
    ]),
    studyList(ctrl)
  ])
}

function main() {

  routes.init()
  deepLinks.init()

  // cached background images
  loadCachedImages()

  // cache viewport dims
  helper.viewportDim()

  // iOs needs this to auto-rotate
  window.shouldRotateToOrientation = function() {
    return true
  }

  // pull session data once (to log in user automatically thanks to cookie)
  // and also listen to online event in case network was disconnected at app
  // startup
  if (hasNetwork()) {
    onOnline()
  }

  document.addEventListener('online', onOnline, false)
  document.addEventListener('offline', onOffline, false)
  document.addEventListener('resume', onResume, false)
  document.addEventListener('pause', onPause, false)
  document.addEventListener('backbutton', router.backbutton, false)
  window.addEventListener('unload', function() {
    socket.destroy()
    socket.terminate()
  })
  window.addEventListener('resize', debounce(onResize), false)

  // iOs keyboard hack
  // TODO we may want to remove this and call only on purpose
  window.cordova.plugins.Keyboard.disableScroll(true)
  window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false)

  if (window.lichess.mode === 'release' && window.lichess.sentryDSN) {
    Raven.config(window.lichess.sentryDSN, {
      release: window.AppVersion ? window.AppVersion.version : 'snapshot-dev'
    }).install()
  }

  if (cordova.platformId === 'android') {
      window.StatusBar.backgroundColorByHexString('#151A1E')
  }

  setTimeout(function() {
    window.navigator.splashscreen.hide()
  }, 500)
}

function main() {

  routes.init()
  deepLinks.init()

  // cached background images
  loadCachedImages()

  // cache viewport dims
  helper.viewportDim()

  // iOs needs this to auto-rotate
  window.shouldRotateToOrientation = () => {
    return true
  }

  // pull session data once (to log in user automatically thanks to cookie)
  // and also listen to online event in case network was disconnected at app
  // startup
  if (hasNetwork()) {
    onOnline()
  } else {
    session.restoreStoredSession()
  }

  document.addEventListener('online', onOnline, false)
  document.addEventListener('offline', onOffline, false)
  document.addEventListener('resume', onResume, false)
  document.addEventListener('pause', onPause, false)
  document.addEventListener('backbutton', router.backbutton, false)
  window.addEventListener('unload', () => {
    socket.destroy()
    socket.terminate()
  })
  window.addEventListener('resize', debounce(onResize), false)

  window.Keyboard.hideKeyboardAccessoryBar(false)

  if (globalConfig.mode === 'release' && globalConfig.sentryDSN) {
    Raven.config(globalConfig.sentryDSN, {
      release: window.AppVersion ? window.AppVersion.version : 'snapshot-dev'
    }).install()
  }

  setTimeout(() => {
    window.navigator.splashscreen.hide()
  }, 500)
}

export default function ExplorerCtrl(
  root: AnalyseCtrl,
  allowed: boolean
): IExplorerCtrl {

  const loading = stream(true)
  const failing = stream(false)
  const current: Mithril.Stream<ExplorerData> = stream({
    moves: []
  })

  let cache: {[index: string]: ExplorerData} = {}

  function setResult(fen: string, data: ExplorerData) {
    cache[fen] = data
    current(data)
  }

  function onConfigClose(changed: boolean) {
    if (changed) {
      cache = {}
      setStep()
    }
  }

  const withGames = !!(isSynthetic(root.data) || gameApi.replayable(root.data) || root.data.game.offline)
  const effectiveVariant: VariantKey = root.data.game.variant.key === 'fromPosition' ? 'standard' : root.data.game.variant.key

  const config = explorerConfig.controller(root.data.game.variant, onConfigClose)
  const debouncedScroll = debounce(() => {
    const table = document.getElementById('explorerTable')
    if (table) table.scrollTop = 0
  }, 200)

  function handleFetchError() {
    loading(false)
    failing(true)
    redraw()
  }

  const fetchOpening = debounce((fen: string): Promise<void> => {
    const conf = {
      db: config.data.db.selected(),
      speeds: config.data.speed.selected(),
      ratings: config.data.rating.selected()
    }
    return openingXhr(effectiveVariant, fen, conf, withGames)
    .then((res: ExplorerData) => {
      res.opening = true
      res.fen = fen
      setResult(fen, res)
      loading(false)
      failing(false)
      redraw()
    })
    .catch(handleFetchError)
  }, 1000, { leading: true, trailing: true })

  const fetchTablebase = debounce((fen: string): Promise<void> => {
    return tablebaseXhr(effectiveVariant, fen)
    .then((res: ExplorerData) => {
      res.tablebase = true
      res.fen = fen
      setResult(fen, res)
      loading(false)
      failing(false)
      redraw()
    })
    .catch(handleFetchError)
  }, 500, { leading: true, trailing: true })

  function fetch(fen: string) {
    if (withGames && tablebaseRelevant(effectiveVariant, fen)) return fetchTablebase(fen)
    else return fetchOpening(fen)
  }

  const empty: ExplorerData = {
    opening: true,
    moves: []
  }

  function setStep() {
    if (root.currentTab(root.availableTabs()).id !== 'explorer') return
    const node = root.node
    if (node.ply > 50 && !tablebaseRelevant(effectiveVariant, node.fen)) {
      setResult(node.fen, empty)
    }
    const fromCache = cache[node.fen]
    if (!fromCache) {
      loading(true)
      fetch(node.fen)
    } else {
      current(fromCache)
      loading(false)
      failing(false)
    }
    redraw()
    debouncedScroll()
  }

//.........这里部分代码省略.........

function renderForm() {
  return [
    h('p.signupWarning.withIcon[data-icon=!]', [
      i18n('computersAreNotAllowedToPlay')
    ]),
    h('p.tosWarning', [
      'By registering, you agree to be bound by our ',
      h('a', {
        oncreate: helper.ontap(() =>
        window.open('https://lichess.org/terms-of-service', '_blank', 'location=no')
        )},
        'Terms of Service'
      ), '.'
    ]),
    h('form.login', {
      onsubmit: function(e: Event) {
        e.preventDefault()
        return submit((e.target as HTMLFormElement))
      }
    }, [
      h('div.field', [
        formError && formError.username ?
          h('div.form-error', formError.username[0]) : null,
        h('input#pseudo[type=text]', {
          className: formError && formError.username ? 'form-error' : '',
          placeholder: i18n('username'),
          autocomplete: 'off',
          autocapitalize: 'off',
          autocorrect: 'off',
          spellcheck: false,
          required: true,
          onfocus: scrollToTop,
          oninput: debounce((e: Event) => {
            const val = (e.target as HTMLFormElement).value.trim()
            if (val && val.length > 2) {
              testUserName(val).then(exists => {
                if (exists) {
                  formError = {
                    username: ['This username is already in use, please try another one.']
                  }
                }
                else {
                  formError = null
                }
                redraw()
              })
            } else {
              formError = null
              redraw()
            }
          }, 100)
        }),
      ]),
      h('div.field', [
        formError && formError.email ?
          h('div.form-error', formError.email[0]) : null,
        h('input#email[type=email]', {
          onfocus: scrollToTop,
          className: formError && formError.email ? 'form-error' : '',
          placeholder: i18n('email'),
          autocapitalize: 'off',
          autocorrect: 'off',
          spellcheck: false,
          required: true
        })
      ]),
      h('div.field', [
        formError && formError.password ?
          h('div.form-error', formError.password[0]) : null,
        h('input#password[type=password]', {
          onfocus: scrollToTop,
          className: formError && formError.password ? 'form-error' : '',
          placeholder: i18n('password'),
          required: true
        })
      ]),
      h('div.submit', [
        h('button.submitButton[data-icon=F]', i18n('signUp'))
      ])
    ])
  ]
}

 () => {
   const white = settings.otb.whitePlayer
   const black = settings.otb.blackPlayer
   return h('div', [
     h('p', 'Import current game state with following player names to lichess?'),
     h('form', [
       h('div.exchange', {
         oncreate: helper.ontap(() => {
           const w = white()
           const b = black()
           white(b)
           black(w)
         })
       }, h('span.fa.fa-exchange.fa-rotate-90')),
       h('div.importMeta.text_input_container', [
         h('label', i18n('white')),
         h('input[type=text]', {
           value: white(),
           oninput: debounce((e: Event) => {
             const val = (e.target as HTMLInputElement).value.trim()
             white(val)
           }, 300),
           onfocus() {
             this.select()
           },
           spellcheck: false
         })
       ]),
       h('div.importMeta.text_input_container', [
         h('label', i18n('black')),
         h('input[type=text]', {
           value: black(),
           oninput: debounce((e: Event) => {
             const val = (e.target as HTMLInputElement).value.trim()
             black(val)
           }, 300),
           onfocus() {
             this.select()
           },
           spellcheck: false
         })
       ])
     ]),
     h('div.popupActionWrapper', [
       ctrl.importer.importing() ?
         h('div', [h('span.fa.fa-hourglass-half'), h('span', 'Importing...')]) :
         h('button.popupAction.withIcon[data-icon=E]', {
           oncreate: helper.ontap(
             () => {
               const white = settings.otb.whitePlayer
               const black = settings.otb.blackPlayer
               ctrl.root.replay.pgn(white(), black())
               .then(data => {
                 ctrl.importer.importGame(data.pgn)
               })
             }
           )
         }, 'Import to lichess')
     ])
   ])
 },

export default function(root: AnalyseCtrl, allow: boolean): ExplorerCtrlInterface {

  const allowed = stream(allow)
  const enabled = stream(false)
  const loading = stream(true)
  const failing = stream(false)
  const current: Mithril.Stream<ExplorerData> = stream({
    moves: []
  })

  function open() {
    router.backbutton.stack.push(close)
    enabled(true)
  }

  function close(fromBB?: string) {
    if (fromBB !== 'backbutton' && enabled()) router.backbutton.stack.pop()
    enabled(false)
    setTimeout(() => root && root.debouncedScroll(), 200)
  }

  let cache: {[index: string]: ExplorerData} = {}

  function setResult(fen: string, data: ExplorerData) {
    cache[fen] = data
    current(data)
  }

  function onConfigClose(changed: boolean) {
    if (changed) {
      cache = {}
      setStep()
    }
  }

  const withGames = !!(isSynthetic(root.data) || gameApi.replayable(root.data) || root.data.game.offline)
  const effectiveVariant: VariantKey = root.data.game.variant.key === 'fromPosition' ? 'standard' : root.data.game.variant.key

  const config = explorerConfig.controller(root.data.game.variant, onConfigClose)
  const debouncedScroll = debounce(() => {
    const table = document.getElementById('explorerTable')
    if (table) table.scrollTop = 0
  }, 200)

  function handleFetchError() {
    loading(false)
    failing(true)
    redraw()
  }

  const fetchOpening = debounce((fen: string): Promise<void> => {
    return openingXhr(effectiveVariant, fen, config.data, withGames)
    .then((res: ExplorerData) => {
      res.opening = true
      res.fen = fen
      setResult(fen, res)
      loading(false)
      failing(false)
      redraw()
    })
    .catch(handleFetchError)
  }, 1000)

  const fetchTablebase = debounce((fen: string): Promise<void> => {
    return tablebaseXhr(effectiveVariant, fen)
    .then((res: ExplorerData) => {
      res.tablebase = true
      res.fen = fen
      setResult(fen, res)
      loading(false)
      failing(false)
      redraw()
    })
    .catch(handleFetchError)
  }, 500)

  function fetch(fen: string) {
    const hasTablebase = ['standard', 'chess960', 'atomic', 'antichess'].includes(effectiveVariant)
    if (hasTablebase && withGames && tablebaseRelevant(fen)) return fetchTablebase(fen)
    else return fetchOpening(fen)
  }

  const empty: ExplorerData = {
    opening: true,
    moves: []
  }

  function setStep() {
    if (!enabled()) return
    const step = root.vm.step
    if (step) {
      if (step.ply > 50 && !tablebaseRelevant(step.fen)) {
        setResult(step.fen, empty)
      }
      const fromCache = cache[step.fen]
      if (!fromCache) {
        loading(true)
        fetch(step.fen)
      } else {
        current(fromCache)
//.........这里部分代码省略.........