欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript防抖案例講解

 更新時(shí)間：2021年08月13日 10:50:36   作者：angus.dai  
這篇文章主要介紹了JavaScript防抖案例講解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

原理

防抖的原理是：你盡管觸發(fā)事件，但是我一定要在事件觸發(fā)n秒之后才執(zhí)行，如果你在一個(gè)事件觸發(fā)的n秒內(nèi)又觸發(fā)了這個(gè)事件，那我就以新的事件的時(shí)間為準(zhǔn)，n秒后再執(zhí)行。總之，就是要等到你觸發(fā)完事件n秒內(nèi)不再觸發(fā)事件，我才執(zhí)行。

案例

<!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和事件對(duì)象event
        }, wait);
    }
}
container.onmousemove = debounce(getUserAction, 1000);

到此這篇關(guān)于JavaScript防抖案例講解的文章就介紹到這了,更多相關(guān)JavaScript防抖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 淺談目前可以使用ES10的5個(gè)新特性

    淺談目前可以使用ES10的5個(gè)新特性

    這篇文章主要介紹了淺談目前可以使用ES10的5個(gè)新特性，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-06-06
  • JS 文件傳參及處理技巧分析

    JS 文件傳參及處理技巧分析

    其實(shí)為js文件傳參是很久就接觸過的一個(gè)問題，只是一直沒有放在心上，今天在無憂看到又有人問這個(gè)問題，今日總結(jié)一下。
    2010-05-05
  • JavaScript中函數(shù)（Function）的apply與call理解

    JavaScript中函數(shù)（Function）的apply與call理解

    這篇文章主要介紹了JavaScript中函數(shù)（Function）的apply與call理解,本文講解了JavaScript函數(shù)調(diào)用分為4中模式以及通過apply和call實(shí)現(xiàn)擴(kuò)展和繼承兩方面,需要的朋友可以參考下
    2015-07-07
  • JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例

    JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例

    這篇文章主要介紹了JS倒計(jì)時(shí)兩種實(shí)現(xiàn)方式代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • jQuery實(shí)現(xiàn)為控件添加水印文字效果(附源碼)

    jQuery實(shí)現(xiàn)為控件添加水印文字效果(附源碼)

    這篇文章主要介紹了jQuery實(shí)現(xiàn)為控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源碼供讀者下載參考,需要的朋友可以參考下
    2015-12-12
  • JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)例分析

    JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)例分析

    這篇文章主要介紹了JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)現(xiàn)方法,涉及JavaScript數(shù)學(xué)運(yùn)算結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)運(yùn)動(dòng)效果的相關(guān)技巧,需要的朋友可以參考下
    2016-01-01
  • 淺談JS的原型和繼承

    淺談JS的原型和繼承

    這篇文章主要介紹了JS原型和繼承，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • JS數(shù)組方法reduce的妙用分享

    JS數(shù)組方法reduce的妙用分享

    在?JavaScript?中，reduce?是最難理解的數(shù)組方法之一，它是一個(gè)強(qiáng)大而靈活的高階函數(shù)，下面就來看看?reduce?的妙用之處，希望對(duì)大家有所幫助
    2023-02-02
  • Bootstrap 粘頁腳效果

    Bootstrap 粘頁腳效果

    Bootstrap 粘頁腳，說得具體一點(diǎn)就是“將固定高度的頁腳緊貼頁面底部”，本文給大家分享具有實(shí)現(xiàn)代碼，感興趣的朋友參考下吧
    2016-03-03
  • 微信小程序?qū)崿F(xiàn)翻牌抽獎(jiǎng)動(dòng)畫

    微信小程序?qū)崿F(xiàn)翻牌抽獎(jiǎng)動(dòng)畫

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)翻牌抽獎(jiǎng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-09-09

最新評(píng)論