前端js防抖

冷不防 2023-10-13 19:43 36阅读 0赞

### 一、原生js防抖 ###

<!DOCTYPE html>
    <html>
    <head>
      <title>防抖按钮示例</title>
    </head>
    <body>
      <button id="immediateButton">立即触发</button>
      <button id="waitButton">等候触发</button>
    
      <script>
        function debounceImmediate(func, delay) {
          
          let timeoutId;
          let immediate = true;
    
          return function (...args) {
          
            clearTimeout(timeoutId);
    
            if (immediate) {
          
              func.apply(this, args);
              immediate = false;
            }
    
            timeoutId = setTimeout(() => {
          
              immediate = true;
            }, delay);
          };
        }
    
        function debounceWait(func, delay) {
          
          let timeoutId;
    
          return function (...args) {
          
            clearTimeout(timeoutId);
    
            timeoutId = setTimeout(() => {
          
              func.apply(this, args);
            }, delay);
          };
        }
    
        function handleImmediateClick() {
          
          console.log('立即触发按钮点击事件处理函数');
          // 在这里执行立即触发逻辑
        }
    
        function handleWaitClick() {
          
          console.log('等候触发按钮点击事件处理函数');
          // 在这里执行等候触发逻辑
        }
    
        const debouncedImmediateClick = debounceImmediate(handleImmediateClick, 1000); // 创建立即触发的防抖函数
        const debouncedWaitClick = debounceWait(handleWaitClick, 1000); // 创建等候触发的防抖函数
    
        const immediateButton = document.getElementById('immediateButton');
        immediateButton.addEventListener('click', debouncedImmediateClick);
    
        const waitButton = document.getElementById('waitButton');
        waitButton.addEventListener('click', debouncedWaitClick);
      </script>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现防抖

防抖的目的是在一段时间内，只执行一次函数。下面是一个使用 JavaScript 实现防抖的示例： function debounce(fn, delay) {

ゝ一纸荒年。/ 2024年03月27日 12:53/ 0 赞/ 68 阅读

相关前端js防抖

一、原生js防抖 <!DOCTYPE html> <html> <head> <title>防抖按钮示例</title> </

冷不防/ 2023年10月13日 19:43/ 0 赞/ 37 阅读

相关 js 防抖、节流

突发奇想，在触发事件的时候，一些会频繁触发的事件会不会造成资源的浪费或者大量的计算造成页面卡顿，比如onresize,onscroll,onmousemove等事件。然后就

川长思鸟来/ 2023年10月11日 12:27/ 0 赞/ 9 阅读

相关 JS 手写防抖

JS 手写防抖 <!DOCTYPE html> <html lang="en"> <head> <meta c

痛定思痛。/ 2022年11月01日 13:54/ 0 赞/ 177 阅读

相关 js函数防抖

上代码，自己测试。防抖简单说就是减少http请求，前端性能优化 <!DOCTYPE html> <html> <head> <met

小咪咪/ 2022年09月16日 04:54/ 0 赞/ 201 阅读

相关 js 防抖原理

一、在前端中有一些事件会频繁的触发容易造成页面卡顿，例如： 1. window 的 resize、scroll 2. mousedown、mousemove 3.

深藏阁楼爱情的钟/ 2022年09月11日 08:19/ 0 赞/ 199 阅读

相关 JS防抖

在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如： 1、window 的 resize、scroll 2

梦里梦外;/ 2022年06月13日 04:16/ 0 赞/ 225 阅读

相关 JS 防抖

没有防抖： var count = 1; var container = document.getElementById('container');

àì夳堔傛蜴生んèń/ 2022年06月06日 02:14/ 0 赞/ 230 阅读

相关 JS函数防抖

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。应用场景： 1. 实时搜索 2. 拖拽当输完nba之

墨蓝/ 2022年05月23日 07:24/ 0 赞/ 207 阅读

相关 js 防抖是什么 JavaScript防抖怎么用

JS防抖其实也是用来提升网页性能的一种技术写法防抖就是指当用户触发某个操作时，如果在指定的时间内再次触发该操作，那么就清除前面触发的操作，直到用户操作之后并且在指定的时间

深藏阁楼爱情的钟/ 2021年10月19日 06:48/ 0 赞/ 374 阅读