怎么自己免费做网站,html网页设计作品中国传统文化,自己做网站能做付费链接吗,wordpress 本地数据库1 防抖和节流函数
/*** 防抖原理#xff1a;一定时间内#xff0c;只有最后一次操作#xff0c;再过wait毫秒后才执行函数* 防抖又分为立即执行和延迟执行* - 立即执行#xff1a;点击第一次就会执行#xff0c;后续指定时间内的点击不会生效* - 延迟执行#xff1a;指定…1 防抖和节流函数
/*** 防抖原理一定时间内只有最后一次操作再过wait毫秒后才执行函数* 防抖又分为立即执行和延迟执行* - 立即执行点击第一次就会执行后续指定时间内的点击不会生效* - 延迟执行指定时间内不再进行点击也就是过了这个指定时间才会执行一次函数前面的n次点击不会生效** param {Function} func 要执行的回调函数* param {Number} wait 延时的时间* param {Boolean} immediate 是否立即执行* return null*/
function debounce(func, wait 500, immediate true) {let timer null;return function (...args) {// 如果存在定时器则还处在等待期间则清除定时器重新开始计算时间if (timer) {clearTimeout(timer);}if (immediate) {// 如果是立即执行则第一次进入的时候定时器为空会立即执行一次然后立即开启一个定时器// 短时间内触发第二次时定时器是不为空的那么就不会执行只有等定时器走完清除了timer才会再次执行// 这样也就实现了第一次点击立即执行后面过了指定时间定时器为空才会再次执行// 注意需要注意参数和this绑定的处理if (!timer) {typeof func function func.apply(this, args);}timer setTimeout(() {timer null;}, wait);} else {// 设置定时器定时器正常走完才会执行方法也就是指定时间内没有再次触发才会执行timer setTimeout(() {typeof func function func.apply(this, args);}, wait);}};
}/*** 节流原理当持续触发事件时有规律地每隔一个时间间隔执行一次事件处理函数* 适用于大量触发事件的场景譬如监听滚动事件、鼠标滑动事件等** param {Function} func 要执行的回调函数* param {Number} wait 延时的时间* param {Boolean} immediate 是否立即执行* return null*/
function throttle(func, wait 500, immediate true) {let isCanExecute true; // 是否可以执行函数return function (...args) {if (immediate) {// 立即执行if (isCanExecute) {isCanExecute false;typeof func function func.apply(this, args);setTimeout(() {isCanExecute true;}, wait);}} else {// 延迟执行// 第一次触发处于可以执行的状态会进入判断状态设置为不可以执行同时开启定时器定时器当中会执行函数执行完函数会重置状态为可以执行// 第二次触发时处于不可执行状态不会进入判断只有当内部的定时器走完后状态设置为了true才会进入判断才会开启定时器if (isCanExecute) {isCanExecute false;setTimeout(() {typeof func function func.apply(this, args);isCanExecute true;}, wait);}}};
}2 Vue当中的写法
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titleVue/title/headbodydiv idappbutton clickhandleDebounceClick(1, 2)按钮-防抖/buttonbutton clickhandleThrottleClick(1, 2)按钮-节流/button/div/bodyscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js/script!-- utils.js文件的内容就是上述的两个函数 --script src../utils.js/scriptscriptnew Vue({el: #app,data: {num: 123,},methods: {// 防抖handleDebounceClick: debounce(function (data1, data2) {console.log(this.num); // 读取data当中的数据console.log(data1); // 读取参数1console.log(data2); // 读取参数2}),// 节流handleThrottleClick: throttle(function (data1, data2) {console.log(this.num); // 读取data当中的数据console.log(data1); // 读取参数1console.log(data2); // 读取参数2}),},});/script
/html3 React当中的写法
// utils.js文件的内容就是上述的两个函数
import { debounce, throttle } from ../utils.js;
function Demo(props) {// 防抖const handleDebounceClick debounce((data1, data2) {console.log(data1); // 读取参数1console.log(data2); // 读取参数2});// 节流const handleThrottleClick throttle((data1, data2) {console.log(data1); // 读取参数1console.log(data2); // 读取参数2});return (React.Fragmentbutton onClick{() handleDebounceClick(1, 2)}按钮-防抖/buttonbutton onClick{() handleThrottleClick(1, 2)}按钮-节流/button/React.Fragment);
}
