前端頁面鼠標移動監控（鼠標運動、鼠標監控）鼠標節流處理、throttle、限制觸發頻率（setTimeout、clearInterval）

文章目錄

- 使用lodashjs庫
- 手動實現節流（通過判斷之前設定的定時器setTimeout是否存在）

使用lodashjs庫

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>頁面標題</title><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script><!-- <link rel="stylesheet" href="styles.css"> --><!-- <script src="script.js" defer></script> --><style>.box {width: 200px;/* 設置盒子的寬度 */height: 200px;/* 設置盒子的高度 */background-color: lightblue;/* 設置盒子的背景顏色 */border: 1px solid #000;/* 可選: 添加邊框 */display: flex;/* 使用 flexbox 布局 */justify-content: center;/* 水平居中內容 */align-items: center;/* 垂直居中內容 */font-size: 24px;/* 設置字體大小 */}</style>
</head><body><div class="box"></div> <!-- 創建一個盒子元素 --><script>const box = document.querySelector('.box');let i = 1;function mouseMove() {box.innerHTML = i++; // 顯示當前計數器值console.log(i);}// 使用 lodash 的 throttle 函數進行節流box.addEventListener('mousemove', _.throttle(mouseMove, 3000)); // 每3000毫秒調用一次</script>
</body></html>

在這里插入圖片描述

手動實現節流（通過判斷之前設定的定時器setTimeout是否存在）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>頁面標題</title><!-- <link rel="stylesheet" href="styles.css"> --><!-- <script src="script.js" defer></script> --><style>.box {width: 200px;/* 設置盒子的寬度 */height: 200px;/* 設置盒子的高度 */background-color: lightblue;/* 設置盒子的背景顏色 */border: 1px solid #000;/* 可選: 添加邊框 */display: flex;/* 使用 flexbox 布局 */justify-content: center;/* 水平居中內容 */align-items: center;/* 垂直居中內容 */font-size: 24px;/* 設置字體大小 */}</style>
</head><body><div class="box"></div> <!-- 創建一個盒子元素 --><script>const box = document.querySelector('.box');let i = 1;function mouseMove() {box.innerHTML = i++; // 顯示當前計數器值console.log(i);}function throttle(fn, delay) {let timer = null;return function () {console.log('判斷定時器是否為空？', timer);if (!timer) {console.log('定時器為空，延遲執行');timer = setTimeout(() => {fn(); // 在里面就是延遲執行，在外面就是立即執行timer = null;}, delay);}console.log('不執行');}}// 使用 lodash 的 throttle 函數進行節流box.addEventListener('mousemove', throttle(mouseMove, 3000)); // 每3000毫秒調用一次</script>
</body></html>

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/900190.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/900190.shtml
英文地址，請注明出處：http://en.pswp.cn/news/900190.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！