定时器的使用

什么什么你说什么

已于 2022-05-26 11:11:05 修改

阅读量177

点赞数

文章标签： js javascript

于 2021-07-06 15:53:05 首次发布

本文链接：https://blog.csdn.net/W_o_W123/article/details/118521725

版权

文章目录

一、setTimeout：只在指定时间后执行一次，代码如下：
二、setInterval：以指定时间为周期循环执行，代码如下：
三、防抖、节流

定时器是异步进行的，以毫秒为单位。一般情况，定时器中的this指向window。

一、setTimeout：只在指定时间后执行一次，代码如下：

<script>
	function test(){
		alter("hello")
	}
	// 方法1：
	let method1 = window.setTimeout(test, 1000)
	// 方法2：
	let method2 = window.setTimeout("test()", 2000)
	// 方法3 
	let method3 = window.setTimeout(
		function te(){
			alter("hello")
		}, 3000)
	// 取消method1设置的定时器
	window.clearTimeout(method1)
</script>

二、setInterval：以指定时间为周期循环执行，代码如下：

<script>
	function test1(){
		console.log(1)
	}
	// 开始
	let method1 = window.setInterval(test1, 1000)
	// 结束时调用  清空计时器
	window.clearInterval(method1)
</script>

三、防抖、节流

 <style>
   div {
     width: 500px;
     height: 500px;
     margin: 10px auto;
     border: 1px solid red;
     text-align: center;
     font-size: 20px;
   }
 </style>
<body>
  <div class="fd"></div>
  <div class="jl"></div>
  <script>
    // ------ 防抖：鼠标不动后的1s 数据改变------------
    let fdnum = 1
    let jlnum = 1
    let fd = document.querySelector('.fd')
    let jl = document.querySelector('.jl')

    function fdcount() {
      fd.innerHTML = fdnum++
    }

    function jlcount() {
      jl.innerHTML = jlnum++
    }
    // 非立即执行版：
    function debounce(func, wait) {
      let timeout
      console.log('------1123------');
      return function () {
        // let context = this
        // let args = arguments
        if (timeout) {
          clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
          func()
        }, wait)
      }
    }

    // 立即执行版：
    // function debounce(func, wait) {
    //   let timeout
    //   return function () {
    //     let context = this
    //     let args = arguments
    //     if (timeout) {
    //       clearTimeout(timeout)
    //     }
    //     let callNow = !timeout
    //     timeout = setTimeout(() => {
    //       timeout = null
    //     }, wait)
    //     if (callNow) {
    //       func.apply(context, args)

    //       // func()
    //     }
    //   }
    // }
    fd.onmousemove = function debounce(func, wait) {
      let timeout
      console.log('------1123------');
      return function () {
        // let context = this
        // let args = arguments
        if (timeout) {
          clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
          func()
        }, 1000)
      }
    }

    /**
     * @desc 函数防抖
     * @param fun 函数
     * @param wait 延迟执行毫秒数
     * @param immediate true 表示立即执行，false 表示非立即执行
     */
    // function debounce(func, wait, immediate) {
    //   let timeout
    //   return function () {
    //     let context = this
    //     let args = arguments
    //     if (timeout) {
    //       clearTimeout(timeout)
    //     }
    //     if (immediate) {
    //       let callNow = !timeout
    //       timeout = setTimeout(() => {
    //         timeout = null
    //       }, wait)
    //       if (callNow) {
    //         func.apply(context, args)
    //       }
    //     } else {
    //       timeout = setTimeout(() => {
    //         func.apply(context, args)
    //       }, wait)
    //     }
    //   }
    // }
    // fd.onmousemove = debounce(fdcount, 1000, true)

    // ---- 节流 ------
    /**
     * @desc 函数节流
     * @param func 函数
     * @param wait 延迟执行毫秒数
     * @param type 1: 时间戳版，2：定时器版
     */
    function throttle(func, wait, type) {
      let previous = 0
      let timeout = null
      return function () {
        let context = this
        let args = arguments
        if (type === 1) {
          let now = Date.now()
          console.log(now)

          if (now - previous > wait) {
            func.apply(context, args)
            previous = now
          }
        } else if (type === 2) {
          if (!timeout) {
            timeout = setTimeout(() => {
              timeout = null
              func.apply(context, args)
            }, wait)
          }
        }
      }
    }
    jl.onmousemove = throttle(jlcount, 1000, 2)
  </script>
</body>