一.節流
1.簡要說明
-
使用場景:拖拽一個元素時,要隨時拿到它被拖拽的位置;
-
適用方式:使用drag,會由于拖拽頻繁而發生卡頓;
-
使用節流: 無論拖拽速度有多快,都讓其每隔設定的時間觸發一次該事件;
-
經典說法: 首先第一個可以進入,讓這個事件失效delay,在delay時間期間,不能在執行該函式,當一旦到達delay,就執行該事件;
2.代碼展示
1 //html部分 2 3 <div id="div1" draggable="true" style="width:100px;height:100px;background:pink">可拖拽</div> 4 5 //封裝塊 6 7 const div1 = document.getElementById('div1') 8 function throttle(fn, delay) { 9 let timer = null; 10 return function () { 11 //說明該時間小于delay,就讓他跳出; 12 if(timer) return; 13 timer = setTimeout(() => { 14 //一旦delay一到,就清空 15 clearTimeout(timer); 16 fn.apply(this, arguments) 17 timer=undefined; 18 }, delay); 19 } 20 } 21 22 //示例 23 24 div1.addEventListener('drag', throttle(function (e) { 25 console.log(e.offsetX, e.offsetY) 26 }, 500))
//簡寫法
1 if(ids) return; 2 ids=setTimeout(()=>{ 3 clearTimeout(ids); 4 ids=undefined; 5 6 },500)
3.實作效果
在拖拽速度過快時,并不是持續列印,而是過了delay后才會列印坐標;不會造成卡頓;
二.防抖
1.簡要說明
-
使用場景:在input輸入框輸入內容過快;
-
使用方式:使用keyup事件,會頻繁觸發change事件;
-
使用防抖: 用戶連續輸入時,并不會持續列印,而是在輸入結束或暫停時,會觸發change事件;
-
經典說法: 在一定期限內進入后不會執行,當delay達到會執行最后一次進入時的結果;
2.代碼展示
1 var debounce = (fn, delay) => { 2 return (...args) => { 3 timer = setTimeout(() => { 4 var timer = null; 5 clearTimeout(timer); 6 fn(...args) 7 }, delay) 8 } 9 } 10 input1.addEventListener('keyup', debounce(() => { 11 console.log(input1.value) 12 }, 500))
3.實作效果
在持續在輸入框輸入值的時候,并不會持續列印,而是受限于delay會觸發列印這個事件;
感謝指正,多謝點評
2022-02-17
音樂伴我開發
感謝博主的文獻https://blog.csdn.net/express_yourself/article/details/107411794
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434434.html
標籤：JavaScript
上一篇：flex布局
下一篇：關于各資料型別之間的轉換