JS寫定時器節流函式配合Oninput事件

阿新 • • 發佈：2021-01-04

JS寫定時器節流函式

JS定時器

1、setTimeout
2、setInterval
3、clearTimeout
4、clearInterval

什麼是JS定時器

最簡單來講就是JS提供給我們的一種延時執行程式碼的方法，比如我想在某個按鈕按下以後，等待1秒去執行提醒，這是最基礎的用法；

<html>
<body>

<script type="text/javascript">
function clock()
{
alert('我是延時執行' 
)
}
</script>

<button onclick="setTimeout(function(){clock()},1500)">1.5秒執行</button>

</body>
</html>

這裡的示例就是介紹了setTimeout的用法，他是多久以後去執行一次方法體；那麼有一次肯定就是有多次的了比如setInterval，它會一直按照間隔事件去執行，只要沒被清除掉；

<html>
<body>

<script type="text/javascript"> 

function clock()
{
alert('我是延時執行')
}
</script>

<button onclick="setInterval(function(){clock()},1500)">1.5秒執行</button>

</body>
</html>

所以一般會配合clearInterval方法去清除掉它，否則就會像上面的程式碼一樣，一直不休止的再迴圈呼叫；

<html>
<body>

<script type="text/javascript"> 

	var time;
function clock()
{
	time=setInterval(function(){alter('我是延時執行');},1500);
}
	
function clears(){
	debugger
	clearInterval(time);
}
</script>

<button onclick="clock()">1.5秒執行</button>
<button onclick="clears()">取消1.5秒執行</button>

</body>
</html>

在這裡我們點選第一個按鈕會執行列印，當我們點選第二個按鈕他就會停止列印，也就是說定時器被清除掉了；

Oninput

首先還是介紹一下這是個啥，這是監聽文字框的內容改變事件，比如最常見的百度輸入框，你一邊輸入它在下面一邊進行模糊搜尋，這個就是最常見的使用場景了，但是我們在直接使用的時候是有問題的，因為它會一個字元執行一次，比如我用拼音打一個 “”“你在幹什麼”，那他就會執行"nizaiganshenme"在這一句話它會執行14次，也就是說會去呼叫查詢介面14次，這樣太頻繁了，顯然達不到設計標準。所以我們要配合JS定時器，來寫一個節流函式，讓它應該是等到我們輸入完或者是輸入中間停頓了一定時間才去執行查詢！

        //節流函式，防止使用者短時間多次輸入導致多次呼叫
        var inputtime;//定義變數接收定時器
        
        function throttle(res, type) {//這裡的引數不是必須的，是因為我下面的方法體需要
            clearTimeout(inputtime);
            inputtime = setTimeout(function () {
                GetBBstatusSelect(res, type)//執行自定義方法體
            }, 1000)
        }

上面就是定義好的節流函式，這個時候我們去頁面呼叫

<html>
<body>

<script type="text/javascript">
       //節流函式，防止使用者短時間多次輸入導致多次呼叫
        var inputtime;//定義變數接收定時器
        
        function throttle(res, type) {//這裡的引數不是必須的，是因為我下面的方法體需要
            clearTimeout(inputtime);
            inputtime = setTimeout(function () {
               console.log("開始查詢，您輸入的是："+res)
            }, 1000)
        }
</script>
<input type="text" oninput="throttle(this.value,1)"/>

</body>
</html>

通過這個方式你會發現，如果我每次輸入間隔在1秒內，那麼它是不會去執行列印的，這裡列印換成我定義好的查詢方法那麼這個輸入模糊查詢就完美實現了，後面的1000代表1秒，如果覺得頻率太快還可以設定成1.5秒或者2秒，總之這樣就完美實現了一邊輸入一邊查詢了！！！
在這裡插入圖片描述

JS寫定時器節流函式配合Oninput事件