溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-05 16:10:14 來(lái)源：腳本之家 閱讀：324 作者：兮川 欄目：web開(kāi)發(fā)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>xichuan</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css" 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í)行還沒(méi)有開(kāi)始，就被清除，然后重新生成新的延時(shí)器
      //雖然不停的清除，生成新的延時(shí)器，但在輸入的時(shí)候延時(shí)器內(nèi)部的方法都一直沒(mé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í)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手