您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

JavaScript防抖案例讲解

51自学网 2022-05-02 21:34:46
  javascript

原理

防抖的原理是:你尽管触发事件,但是我一定要在事件触发n秒之后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n秒后再执行。总之,就是要等到你触发完事件n秒内不再触发事件,我才执行。

案例

<!DOCTYPE html><html lang="zh-cmn-Hans"><head>    <meta charset="utf-8">    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">    <title>debounce</title>    <style>        * {            margin: 0;            padding: 0;        }        #container {            width: 100%;            height: 200px;            line-height: 200px;            text-align: center;            color: #fff;            background-color: #444;            font-size: 30px;        }    </style></head><body>    <div id="container"></div>    <script src="debounce.js"></script></body></html>
function getUserAction(e) {    console.log(this);    console.log(e);    container.innerHTML = count++;};function debounce(func, wait) {    var timeout;    return function () {        clearTimeout(timeout);        timeout = setTimeout(() => {            func.apply(this, arguments);    // 解决this和事件对象event        }, wait);    }}container.onmousemove = debounce(getUserAction, 1000);

到此这篇关于JavaScript防抖案例讲解的文章就介绍到这了,更多相关JavaScript防抖内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com!


vue+springboot实现登录功能
如何使用Vue的思想封装一个Storage
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1