函数防抖和节流

最新推荐文章于 2024-05-18 03:07:39 发布

南*栀

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量39

点赞数

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/qq_57606691/article/details/120650986

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
       #content {
           width:150px;
           line-height:150px;
           text-align:center;
           color: #fff;
           background-color:#ccc;
           font-size:80px;
       }
   </style>
</head>
<body>
<div id="content">1</div>
</body>
<script>
let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = count;
   // 短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。
   function debounce(func, wait) {
   let timer;
   return function() {
   let context = this; // 注意 this 指向
   let args = arguments; // arguments中存着e

   if (timer) clearTimeout(timer);

   timer = setTimeout(() => {
   func.apply(this, args)
   }, wait)
   }
   }
   content.onmousemove = debounce(count,1000);

   // // 立即执行版
   // function debounce(func, wait) {
   // let timer;
   // return function() {
   // let context = this; // 这边的 this 指向谁?
   // let args = arguments; // arguments中存着e

   // if (timer) clearTimeout(timer);

   // let callNow = !timer;

   // timer = setTimeout(() => {
   // timer = null;
   // }, wait)

   // if (callNow) func.apply(context, args);
   // }
   // }
   // 时间戳版
   // function throttle(func, wait) {
   // let previous = 0;
   // return function() {
   // let now = Date.now();
   // let context = this;
   // let args = arguments;
   // if (now - previous > wait) {
   // func.apply(context, args);
   // previous = now;
   // }
   // }
   // }
   // content.onmousemove = throttle(count,2000);

   // 定时器版
   // function throttle(func, wait) {
   // let timeout;
   // return function() {
   // let context = this;
   // let args = arguments;
   //    console.log(timeout);
   // if (!timeout) {
   // timeout = setTimeout(() => {
   // timeout = null;
   // func.apply(context, args)
   // }, wait)
   // }
   // }
   // }
</script>
</html>

南*栀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数防抖和节流

<!DOCTYPE html><html lang="en"><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>Doc...
复制链接

扫一扫