js高階防抖

2021-10-05 18:35:23 字數 784 閱讀 1908

//介紹:

//為防止頻繁觸發事件;例如:onmousemove事件,移動觸發,若使用防抖,若一直移動不會執行該事件,停止該事件操作之後,會在延時時間後去只執行,具體嘗試便知。

//防抖 應用場景

//1,scroll滾動事件觸發

//2,搜尋框輸入查詢

//3,表單驗證(ajax)

//4,按鈕提交事件(ajax)

//5,resize,瀏覽器視窗縮放(ajax)

;function debounce(func,wait,immediate),wait);

}else,wait)

}return result

}//取消防抖執行

decounced.cancel = function()

return decounced;

}//使用介紹

let container = document.queryselector('#warp');

let btn = document.queryselector('#btn');

let dosome = debounce(dosomething,3000,false);

var count = 0;

function dosomething(e)

container.onmousemove = dosome;

//取消未結束的防抖函式

btn.onclick = function()

//工具庫:

////

js節流防抖

什麼是節流防抖?在學習這個問題前,我們先丟擲問題 假設我現在有這麼乙個需求 根據input框輸入內容列印到控制台這個問題簡單啊,很簡單的功能嘛,如下 text id input let input document.getelementbyid input input.addeventlistene...

js防抖節流

第一種 function debounce fn,delay delay 第二種 function debounce fn,delay delay 立即執行就是事件觸發後立即執行,然後超過一段時間沒有觸發事件,執行函式才會被觸發執行 function fn,delay timer settimeou...

js 防抖 截流

突發奇想,在觸發事件的時候,一些會頻繁觸發的事件會不會造成資源的浪費或者大量的計算造成頁面卡頓,比如onresize,onscroll,onmousemove等事件。然後就引出了乙個新知識點 防抖 截流。防抖 是指在事件觸發結束後延時一段時間再去執行 如果在延時期間再次觸發該事件,則重新計算延時時間...