<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>