setTimeout用法——避免重复性触发操作

最新推荐文章于 2022-06-30 14:57:52 发布

宝贝莫慌~~

最新推荐文章于 2022-06-30 14:57:52 发布

阅读量2.4k

点赞数

分类专栏： js相关

本文链接：https://blog.csdn.net/u013231089/article/details/109387406

版权

js相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

btn的click事件，每次点击都会执行给定的function，如果function复杂的话，很容易消耗内存

解决方法——setTimeout延时处理。

给function做延迟处理，比如600毫秒后执行，如果在600毫秒内再次触发方法，则将之前的timeout清除。

关键代码：

  let isr = false
  let timer = null
  let oBtn = document.getElementById('oBtn')
  oBtn.onclick = function () {
    if (isr) {
      clearTimeout(timer)
    } else {
      isr = true
    }
    timer = setTimeout(function () {
      console.log('change')
    }, 600)
  }

代码如下：

<!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>
    .box{
      width: 800px;
      height: 500px;
      overflow: auto;
      margin: 20px auto;
      background-color: #ccc;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 5px;
    }
    .btn{
      width: 200px;
      height: 50px;
      line-height: 50px;
      background-color: #f00;
      margin: 20px auto;
      text-align: center;
      user-select: none;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class='box'>
    <div class='btn' id='oBtn'>click</div>
  </div>
</body>
<script type='text/javascript'>
  let isr = false
  let timer = null
  let oBtn = document.getElementById('oBtn')
  oBtn.onclick = function () {
    if (isr) {
      clearTimeout(timer)
    } else {
      isr = true
    }
    timer = setTimeout(function () {
      console.log('change')
    }, 600)
  }
</script>
</html>

宝贝莫慌~~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
setTimeout用法——避免重复性触发操作

btn的click事件，每次点击都会执行给定的function，如果function复杂的话，很容易消耗内存解决方法——setTimeout延时处理。给function做延迟处理，比如600毫秒后执行，如果在600毫秒内再次触发方法，则将之前的timeout清除。关键代码： let isr = false let timer = null let oBtn = document.getElementById('oBtn') oBtn.onclick = function ()
复制链接

扫一扫