快捷導(dǎo)航

vue之延時(shí)刷新實(shí)例

更新時(shí)間：2019年11月14日 10:20:05 作者：兮川

今天小編就為大家分享一篇vue之延時(shí)刷新實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

當(dāng)我們要做一個(gè)實(shí)時(shí)搜索時(shí)，用watch監(jiān)控?cái)?shù)據(jù)，當(dāng)數(shù)據(jù)不斷變化時(shí)，不可能立刻進(jìn)行接口的請求，這樣會(huì)給服務(wù)器帶來麻煩，使服務(wù)器負(fù)載加重，此時(shí)就需要一個(gè)延時(shí)加載機(jī)制。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>xichuan</title>
  <link rel="stylesheet"  rel="external nofollow" />
  <<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
</head>
<body>
<div id="test">
  <el-input id="inputSearch" placeholder="輸入關(guān)鍵字搜索" suffix-icon="el-icon-search" size="mini" v-model="search"></el-input>
    {{show}}
</div>
</body>
<script>
new Vue({
    el: '#test',
    data: {
      search:'',
      show:'',
      timer: null,
    },
  watch:{
    search:function(val, oldVal){
      //當(dāng)不斷輸入字符時(shí)，因?yàn)檠訒r(shí)執(zhí)行還沒有開始，就被清除，然后重新生成新的延時(shí)器
      //雖然不停的清除，生成新的延時(shí)器，但在輸入的時(shí)候延時(shí)器內(nèi)部的方法都一直沒有被執(zhí)行
      clearTimeout(this.timer); //清除延遲執(zhí)行
 
      this.timer = setTimeout(()=>{  //設(shè)置延遲執(zhí)行
        console.log('search:'+val+','+oldVal);
        this.show = this.search;
      },1000);
    }
  }
 
  });
</script>
<style>
  #inputSearch{
    width: 200px;
    left: 20px
  }
</style>
</html>

以上這篇vue之延時(shí)刷新實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+threejs寫物體動(dòng)畫之物體縮放動(dòng)畫效果
最近在vue中安裝Three.js,無聊順便研究一些關(guān)于3D圖形化庫,下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動(dòng)畫之物體縮放動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決
在項(xiàng)目中使用elementui確實(shí)是很方便的一件事,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決的相關(guān)資料,需要的朋友可以參考下
2023-02-02
前端利用vue實(shí)現(xiàn)導(dǎo)入和導(dǎo)出功能詳細(xì)代碼
最近項(xiàng)目中讓實(shí)現(xiàn)一個(gè)導(dǎo)入導(dǎo)出Excel的功能,下面這篇文章主要給大家介紹了關(guān)于前端利用vue實(shí)現(xiàn)導(dǎo)入和導(dǎo)出功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
Vue父子組件之間事件通信示例解析
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2023-03-03
vue3安裝配置sass的詳細(xì)步驟
sass是css的預(yù)處理器,擴(kuò)展了css語言,提供了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等特性,有助于減少CSS重復(fù)的代碼,節(jié)省開發(fā)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于vue3安裝配置sass的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue Class Component類組件用法
這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一，它是html、css、js等的一個(gè)聚合體，封裝性和隔離性非常強(qiáng)
2022-12-12
vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例
這篇文章主要介紹了vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例，在完成Vue項(xiàng)目以后，在上傳到github并實(shí)現(xiàn)預(yù)覽
2018-11-11
Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式
這篇文章主要介紹了Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue如何使用pdf.js實(shí)現(xiàn)在線查看pdf文件功能
PDF.js是一個(gè)開源的JavaScript庫,用于在網(wǎng)頁上渲染和顯示PDF文件,在Vue中使用PDF.js來預(yù)覽PDF文件是很常見的需求,這篇文章主要給大家介紹了關(guān)于vue如何使用pdf.js實(shí)現(xiàn)在線查看pdf文件功能的相關(guān)資料,需要的朋友可以參考下
2024-03-03
vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解
這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-09-09