JavaScript防抖實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
width: 100%;
height: 300px;
background-color: rgb(13, 84, 105);
color: #fff;
font-size: 48px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
let count = 0;
let container = document.getElementById('container')
function doSomething() {
container.innerHTML = count++
}
//防抖
function debounce(fn, wait, immediate) {
let timeout, result
let debounced = function () {
// 解決this指向問題
let context = this
//函式引數
let args = arguments
//清楚定時器
clearTimeout(timeout)
if (immediate) {
//立即執行
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) {
result = fn.apply(context, args)
}
} else {
timeout = setTimeout(function () {
result = fn.apply(context, args)
}, wait)
}
}
// 取消
debounced.cancel = function () {
clearTimeout(timeout)
timeout = null
}
return debounced
}
container.onmousemove = debounce(doSomething, 300, false)
</script>
</body>
</html>
相關文章
- React如何原生實現防抖?React
- JavaFx 實現按鈕防抖Java
- javascript函式防抖DebounceJavaScript函式
- 防抖原理以及簡單實現
- Vue元件實現函式防抖Vue元件函式
- Vue實現函式防抖元件Vue函式元件
- JavaScript之節流與防抖JavaScript
- 筆記-JavaScript[節流][防抖]筆記JavaScript
- JS簡單實現防抖和節流JS
- JavaScript中函式防抖、節流JavaScript函式
- 防抖與節流的區別與實現
- 淺談JavaScript的防抖與節流JavaScript
- JavaScript 前端效能優化之事件防抖JavaScript前端優化事件
- JavaScript專題系列-防抖和節流JavaScript
- javascript之函式防抖與節流JavaScript函式
- js 防抖實戰講解JS
- 影片直播原始碼,js實現節流和防抖原始碼JS
- 函式節流、函式防抖實現原理分析函式
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- PHP 防抖(防重複提交)有哪些實現方法,具體程式碼PHP
- JavaScript專題之跟著underscore學防抖JavaScript
- JS防抖JS
- 透過Keep-Alive實現防抖&節流元件Keep-Alive元件
- 防抖和節流的應用場景和實現
- js防抖和節流的區別及實現方式JS
- 淺談 JavaScript 中的防抖與節流(一)JavaScript
- JavaScript淺析 -- 定時器和節流防抖JavaScript定時器
- JavaScript中的防抖與節流-圖文版JavaScript
- 防抖函式函式
- js面試(防抖)JS面試
- JS節流和防抖的區分和實現詳解JS
- 前端戰五渣學JavaScript——防抖、節流和rAF前端JavaScript
- JavaScript 高階系列之節流 [throttle] 與防抖 [debounce]JavaScript
- Input框防抖動
- 【跟著大佬學JavaScript】之lodash防抖節流合併JavaScript
- js防抖和節流JS
- 理解函式防抖Debounce函式
- 防抖的兩種操作