JavaScript实现回到顶部，点击复制剪切版，过滤特殊字符，防抖，节流

JavaScript实现回到顶部，点击复制剪切版，过滤特殊字符，防抖，节流

1. 回到顶部
2. 点击复制剪切版
3. 过滤特殊字符
4. 防抖
5. 节流
6. 点击参照更多有用小技巧

1、页面

<link rel="stylesheet" href="./style.css">

<script src="./scrollTop.js"></script>
<script src="./copyText.js"></script>
<script src="./filterCharacter.js"></script>
<script src="./debounce.js"></script>
<script src="./throttle.js"></script>
 
<div class="wrapper">
    <button id="btn1">copyText</button>
    <button id="btn2">debounce</button>
    <button id="btn3">throttle</button>
    <div class="main">
       <h1>这里填写内容，测试回到顶部，增加滚动条</h1>
    </div>
    <div id="scroll-top" class="scroll-top">TOP</div>
</div>

style.css:

html,
body {
    width: 100%;
    height: 100%;
    padding: 5px;
    margin: 0;
}

.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.main {
    width: 100%;
    height: 100%;
    border: 1px solid sandybrown;
}

.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 25px;
    border: 5px solid blue;
}

2、回到顶部

1）直接一步到位回到最顶点
scrollTop.js

// 直接到顶
function scrollTop() {
    window.scrollTo(0, 0);
    document.documentElement.scrollTop = 0;
}

2）优化：加上一点动画，让其滚动

// 匀速移动
function uniformScrollTop() {
    let timer = null;
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function func() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0) {
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 200;
            timer = requestAnimationFrame(func)
        } else {
            cancelAnimationFrame(timer);
        }
    });
}

3、点击复制剪切版

copyText.js

/**
 * 单击按钮将文本复制到剪贴板
 * @param {*} text 
 * @returns 
 */
const copyText = (text) => {
    const clipboardStr = window.clipboardStr
    if(clipboardStr) {
        clipboardStr.clearData()
        clipboardStr.setData('Text', text)
        return true
    } else if(document.execCommand) {
        //Note: document, execCommand is deprecated but some browsers still support it. Remember to check the compatibility when using it
        // Get the content to be copied by creating a dom element
        const el = document.createElement('textarea')
        el.value = text
        el.setAttribute('readonly', '')
        el.style.position = 'absolute'
        el.style.left = '-9999px'
        document.body.appendChild(el)
        el.select()
        // Copy the current content to the clipboard
        document.execCommand('copy')
        // delete el node
        document.body.removeChild(el)
        return true
    }
    return false
}

4、过滤特殊字符

filterCharacter.js

/**
 * 过滤特殊字符
 */
function filterCharacter(str) {
    let pattern = new RegExp("[`~!@#$^&*()=：”“‘’'。，、？|{}':;'%,\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】‘；]");
    let result = "";
    for(let i = 0; i < str.length; i++) {
        result += str.substr(i, 1).replace(pattern, "");
    }
    return result;
}

5、防抖

debounce.js

/**
 * 防抖
 * 在指定时间内频繁触发事件，以最后一次触发为准
 */
function debounce(func, delay) {
    let timer = null;
    return () => {
        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => func.apply(this), delay);
    }
}

6、节流

throttle.js

/**
 * 节流
 * 一个事件在指定时间内被频繁触发，并且只会被触发一次，以第一次为准
 */
function throttle(func, delay) {
    let timer = null;
    return () => {
        if(timer) {
            return;
        }

        timer = setTimeout(() => {
            func.apply(this, arguments);
            timer = null;
        }, delay);
    }
}

7、使用实例

window.onload = function () {
   // 回到顶部
   var oScrollTop = document.getElementById("scroll-top");
   oScrollTop.onclick = function () {
       // 立刻回到顶部
       // scrollTop();
       // 动画滚动到顶部
       uniformScrollTop();
   }

   // 复制剪切板
   var oBtn1 = document.getElementById("btn1");
   oBtn1.onclick = function () {
       copyText("Hello World!")
   }

   // 过滤特殊字符
   var result = filterCharacter("f!~`gjas$#%^&jlsdf)(*’；看；lunc");
   console.log(result);

   /**
    * 输入触发的情况使用防抖
    * 保存的情况使用节流
    */

   // 防抖
   var oBtn2 = document.getElementById("btn2");
   oBtn2.onclick = debounce(() => console.log(new Date().getSeconds()), 3000)

   // 节流
   var oBtn3 = document.getElementById("btn3");
   oBtn3.onclick = throttle(() => console.log(new Date().getSeconds()), 2000);
}

------------------------------------------------------------------------------END-----------------------------------------------------------