<template> <div> <div class="throttle"> <div>輸入框節流：</div> <input type="text" v-model="throttleTxt" placeholder="input輸入框節流"> </div> <div>{{throttleText}}</div> </div> </template> <script> export default { data(){ return { throttleTxt:'', throttleText:'' } }, watch: { throttleTxt(newTxt){ this.throttle(this.allQueryData, null, 500, newTxt); } }, methods: { throttle(fn,context,delay,text){ clearTimeout(fn.timer); fn.timer=setTimeout(() => { fn.call(context,text); },delay); }, allQueryData(text){ this.throttleText = text if(text){ console.log('text',text) }else{ console.log('input為空') } }, } } </script>
js節流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="search" type="text" name="search"> <script> function queryData(text){ console.log("搜索：" + text); } var input = document.getElementById("search"); input.addEventListener("input", function(event){ throttle(queryData, this.value); }); function throttle(fn, text, delay = 500, mustApplyTime = 3000, context = null){ clearTimeout(fn.timer); fn._cur = Date.now(); //記錄當前時間 if (!fn._start){ //若該函數是第一次調用，則直接設置_start,即開始時間，為_cur，即此刻的時間 fn._start = fn._cur; } if (fn._cur-fn._start > mustApplyTime){ //當前時間與上一次函數被執行的時間作差，與mustApplyTime比較，若大於，則必須執行一次函數，若小於，則重新設置計時器 fn.call(context, text); fn._start = fn._cur; } else { fn.timer = setTimeout(function(){ fn.call(context,text); }, delay); } } </script> </body> </html>