Vue异步组件的加载没有延迟，无论'delay'参数如何 [英] Vue async components are loading without delay regardless of the the 'delay' parameter

问题描述

我正在使用 Advanced-Async-Components 来加载应用后加载async component.因此，我尝试了以下代码:

I am using Advanced-Async-Components to load async component after loading of the app. So I have tried the following code:

Index.vue

<template>
    <div class="">
        <Async></Async>
    </div>
</template>

<script>
    // async component
    import LoadComp from '@/components/Loading'
    import ErrorComp from '@/components/Error'
    const Async = () => ({
        // The component to load. Should be a Promise
        component: import('@/components/Async'),
        // A component to use while the async component is loading
        loading: Load,
        // A component to use if the load fails
        error: ErrorComp,
        // Delay before showing the loading component. Default: 200ms.
        delay: 4000, // <--- this is not effecting the loading of component
        // The error component will be displayed if a timeout is
        // provided and exceeded. Default: Infinity.
        timeout: 3000
    })

export default {
    components: {
        Async
    }
}
</script>

Async.vue

<template lang="html">
    <div class="">
        Lorem ipsum dolor sit amet, con .... very larger string/data
    </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
</style>

上面的代码可以正常工作，但对delay参数(Index.vue)无效.根据官方文档，delay在显示加载组件之前延迟.它应该在4000ms之后加载组件，但是会立即加载.

The above code works fine but it has no effect of delay parameter (Index.vue). According to official docs delay is Delay before showing the loading component. It should load the component after 4000ms but it loads instantly.

为什么会这样?

除了使用setTimeout之外，还有其他方法可以实现这一目标吗?

Is there any other way to achieve this apart from using setTimeout?

其他信息

我使用webpack模板使用vue-cli

Vue version : ^2.4.2

推荐答案

之所以会发生这种情况，是因为delay选项设置了在显示 loading 组件(该组件)之前的延迟时间(以毫秒为单位).您已经通过loading选项指定了要在 async 组件加载时显示的内容(该文档的措辞不佳).

This is happening because the delay option sets the amount of delay in milliseconds before showing the loading component, which is the component you have specified via the loading option to display while the async component is loading (the documentation is poorly-worded on this one).

在下面的示例中，一秒钟后加载了两个异步组件.第一个没有延迟，并且其加载分量(LoadingComponent)将立即显示.第二个元素的delay为500，这意味着半秒后，它将显示其加载分量.

In the below example, two async components are loaded after one second. The first has no delay and the its loading component (LoadingComponent) will display immediately. The second has a delay of 500, meaning that after half a second, it will display its loading component.

const LoadingComponent = { template: `<h1>Loading...</h1>` }
const NumberBoxComponent = { template: `<h1>123123</h1>` }

const AsyncComponent1 = () => ({
  component: new Promise((resolve) => {
    setTimeout(() => {
      resolve(NumberBoxComponent)
    }, 1000)
  }),
  loading: LoadingComponent,
})

const AsyncComponent2 = () => ({
  component: new Promise((resolve) => {
    setTimeout(() => {
      resolve(NumberBoxComponent)
    }, 1000)
  }),
  loading: LoadingComponent,
  delay: 500
})

new Vue({
  el: '#app',
  components: {
    'async-component1': AsyncComponent1,
    'async-component2': AsyncComponent2
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <async-component1></async-component1>
  <async-component2></async-component2>
</div>

如果要延迟异步组件的实际加载，则应使用setTimeout.

If you want to delay the actual loading of the async component, you should use setTimeout.

这篇关于Vue异步组件的加载没有延迟，无论'delay'参数如何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！