Skip to content

Commit

Permalink
add warning
Browse files Browse the repository at this point in the history
  • Loading branch information
Chuiantw1212 committed May 10, 2024
1 parent 24e4ff6 commit 17c03b4
Show file tree
Hide file tree
Showing 3 changed files with 310 additions and 17 deletions.
6 changes: 3 additions & 3 deletions components/calculator/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,9 @@ function setUserAndInitialize(form, { showMessage = false }) {
Object.assign(userForm.asset, form.investment)
}
}
if (showMessage) {
ElMessage.success('載入成功')
}
nextTick(async () => {
await ProfileRef.value.calculateProfile({
propagate: true,
Expand All @@ -238,9 +241,6 @@ function setUserAndInitialize(form, { showMessage = false }) {
await MortgageRef.value.calculateMortgage({
propagate: true,
})
if (showMessage) {
ElMessage.success('載入成功')
}
window.scrollTo(0, 0)
})
}
Expand Down
296 changes: 296 additions & 0 deletions components/calculator/lodash.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,296 @@
function isObject(value) {
const type = typeof value;
return value != null && (type === 'object' || type === 'function');
}

/** Detect free variable `global` from Node.js. */
const freeGlobal = typeof global === 'object' && global !== null && global.Object === Object && global

/** Detect free variable `globalThis` */
const freeGlobalThis = typeof globalThis === 'object' && globalThis !== null && globalThis.Object === Object && globalThis

/** Detect free variable `self`. */
const freeSelf = typeof self === 'object' && self !== null && self.Object === Object && self

/** Used as a reference to the global object. */
const root = freeGlobalThis || freeGlobal || freeSelf || Function('return this')()

/**
* Creates a debounced function that delays invoking `func` until after `wait`
* milliseconds have elapsed since the last time the debounced function was
* invoked, or until the next browser frame is drawn. The debounced function
* comes with a `cancel` method to cancel delayed `func` invocations and a
* `flush` method to immediately invoke them. Provide `options` to indicate
* whether `func` should be invoked on the leading and/or trailing edge of the
* `wait` timeout. The `func` is invoked with the last arguments provided to the
* debounced function. Subsequent calls to the debounced function return the
* result of the last `func` invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the debounced function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until the next tick, similar to `setTimeout` with a timeout of `0`.
*
* If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
* invocation will be deferred until the next frame is drawn (typically about
* 16ms).
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `debounce` and `throttle`.
*
* @since 0.1.0
* @category Function
* @param {Function} func The function to debounce.
* @param {number} [wait=0]
* The number of milliseconds to delay; if omitted, `requestAnimationFrame` is
* used (if available).
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=false]
* Specify invoking on the leading edge of the timeout.
* @param {number} [options.maxWait]
* The maximum time `func` is allowed to be delayed before it's invoked.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new debounced function.
* @example
*
* // Avoid costly calculations while the window size is in flux.
* jQuery(window).on('resize', debounce(calculateLayout, 150))
*
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
* jQuery(element).on('click', debounce(sendMail, 300, {
* 'leading': true,
* 'trailing': false
* }))
*
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
* const debounced = debounce(batchLog, 250, { 'maxWait': 1000 })
* const source = new EventSource('/stream')
* jQuery(source).on('message', debounced)
*
* // Cancel the trailing debounced invocation.
* jQuery(window).on('popstate', debounced.cancel)
*
* // Check for pending invocations.
* const status = debounced.pending() ? "Pending..." : "Ready"
*/
export function debounce(func, wait, options) {
console.log(func, wait)
let lastArgs;
let lastThis;
let maxWait;
let result;
let timerId;
let lastCallTime;
let lastInvokeTime = 0;
let leading = false;
let maxing = false;
let trailing = true;

// Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
const useRAF = !wait && wait !== 0 && typeof root.requestAnimationFrame === 'function';

if (typeof func !== 'function') {
throw new TypeError('Expected a function');
}
wait = +wait || 0;
if (isObject(options)) {
leading = !!options.leading;
maxing = 'maxWait' in options;
maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait;
trailing = 'trailing' in options ? !!options.trailing : trailing;
}

function invokeFunc(time) {
const args = lastArgs;
const thisArg = lastThis;

lastArgs = lastThis = undefined;
lastInvokeTime = time;
result = func.apply(thisArg, args);
return result;
}

function startTimer(pendingFunc, milliseconds) {
if (useRAF) {
root.cancelAnimationFrame(timerId);
return root.requestAnimationFrame(pendingFunc);
}
// eslint-disable-next-line @typescript-eslint/no-implied-eval
return setTimeout(pendingFunc, milliseconds);
}

function cancelTimer(id) {
if (useRAF) {
root.cancelAnimationFrame(id);
return;
}
clearTimeout(id);
}

function leadingEdge(time) {
// Reset any `maxWait` timer.
lastInvokeTime = time;
// Start the timer for the trailing edge.
timerId = startTimer(timerExpired, wait);
// Invoke the leading edge.
return leading ? invokeFunc(time) : result;
}

function remainingWait(time) {
const timeSinceLastCall = time - lastCallTime;
const timeSinceLastInvoke = time - lastInvokeTime;
const timeWaiting = wait - timeSinceLastCall;

return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
}

function shouldInvoke(time) {
const timeSinceLastCall = time - lastCallTime;
const timeSinceLastInvoke = time - lastInvokeTime;

// Either this is the first call, activity has stopped and we're at the
// trailing edge, the system time has gone backwards and we're treating
// it as the trailing edge, or we've hit the `maxWait` limit.
return (
lastCallTime === undefined ||
timeSinceLastCall >= wait ||
timeSinceLastCall < 0 ||
(maxing && timeSinceLastInvoke >= maxWait)
);
}

function timerExpired() {
const time = Date.now();
if (shouldInvoke(time)) {
return trailingEdge(time);
}
// Restart the timer.
timerId = startTimer(timerExpired, remainingWait(time));
return undefined;
}

function trailingEdge(time) {
timerId = undefined;

// Only invoke if we have `lastArgs` which means `func` has been
// debounced at least once.
if (trailing && lastArgs) {
return invokeFunc(time);
}
lastArgs = lastThis = undefined;
return result;
}

function cancel() {
if (timerId !== undefined) {
cancelTimer(timerId);
}
lastInvokeTime = 0;
lastArgs = lastCallTime = lastThis = timerId = undefined;
}

function flush() {
return timerId === undefined ? result : trailingEdge(Date.now());
}

function pending() {
return timerId !== undefined;
}

function debounced(...args) {
const time = Date.now();
const isInvoking = shouldInvoke(time);

lastArgs = args;
lastThis = this;
lastCallTime = time;

if (isInvoking) {
if (timerId === undefined) {
return leadingEdge(lastCallTime);
}
if (maxing) {
// Handle invocations in a tight loop.
timerId = startTimer(timerExpired, wait);
return invokeFunc(lastCallTime);
}
}
if (timerId === undefined) {
timerId = startTimer(timerExpired, wait);
}
return result;
}
debounced.cancel = cancel;
debounced.flush = flush;
debounced.pending = pending;
return debounced;
}

/**
* Creates a throttled function that only invokes `func` at most once per
* every `wait` milliseconds (or once per browser frame). The throttled function
* comes with a `cancel` method to cancel delayed `func` invocations and a
* `flush` method to immediately invoke them. Provide `options` to indicate
* whether `func` should be invoked on the leading and/or trailing edge of the
* `wait` timeout. The `func` is invoked with the last arguments provided to the
* throttled function. Subsequent calls to the throttled function return the
* result of the last `func` invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the throttled function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until the next tick, similar to `setTimeout` with a timeout of `0`.
*
* If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
* invocation will be deferred until the next frame is drawn (typically about
* 16ms).
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `throttle` and `debounce`.
*
* @since 0.1.0
* @category Function
* @param {Function} func The function to throttle.
* @param {number} [wait=0]
* The number of milliseconds to throttle invocations to; if omitted,
* `requestAnimationFrame` is used (if available).
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=true]
* Specify invoking on the leading edge of the timeout.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new throttled function.
* @example
*
* // Avoid excessively updating the position while scrolling.
* jQuery(window).on('scroll', throttle(updatePosition, 100))
*
* // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
* const throttled = throttle(renewToken, 300000, { 'trailing': false })
* jQuery(element).on('click', throttled)
*
* // Cancel the trailing throttled invocation.
* jQuery(window).on('popstate', throttled.cancel)
*/
export function throttle(func, wait, options) {
let leading = true;
let trailing = true;

if (typeof func !== 'function') {
throw new TypeError('Expected a function');
}
if (isObject(options)) {
leading = 'leading' in options ? !!options.leading : leading;
trailing = 'trailing' in options ? !!options.trailing : trailing;
}
return debounce(func, wait, {
leading,
trailing,
maxWait: wait,
});
}
25 changes: 11 additions & 14 deletions components/calculator/retirement.vue
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ import { ref, computed, shallowRef, reactive } from 'vue'
import Chart from 'chart.js/auto';
import econSelect from '../econSelect.vue'
import { ElMessage, } from 'element-plus'
import { throttle, debounce } from './lodash.js'
interface IOptionItem {
label: string,
value: string | number | boolean,
Expand Down Expand Up @@ -342,7 +343,7 @@ function calculateRetirement(options: any = { propagate: true }) {
calculateRetirementExpense()
const { propagate = true } = options
debounce(() => {
customDebounce(() => {
drawRetirementAssetChart(propagate)
})(propagate)
}
Expand Down Expand Up @@ -562,11 +563,6 @@ async function drawRetirementAssetChart(propagate = false) {
// 未還完的房貸支出
const simYear = currentYear + yearToRetirement + i
const annualRepay = monthlyRepay * 12
console.log({
downpayYear,
loanTerm,
simYear
})
if (loanEndYear >= simYear) {
pmt -= annualRepay
mortgageData.push([0, -annualRepay])
Expand All @@ -581,9 +577,11 @@ async function drawRetirementAssetChart(propagate = false) {
labels.push(calculatedYear)
pv = fv
}
// if (fv <= 0) {
// ElMessage.error('退休,晚節不保!')
// }
if (fv <= 0) {
if (!errorMssage.pending()) {
errorMssage()
}
}
// 繪圖
const tension = 0.5
const datasets = [
Expand All @@ -607,10 +605,6 @@ async function drawRetirementAssetChart(propagate = false) {
}
]
const hasMortgage = mortgageData.some(data => data[1])
console.log({
mortgageData,
hasMortgage
})
if (hasMortgage) {
datasets.push({
label: '房貸剩餘利息',
Expand Down Expand Up @@ -650,6 +644,9 @@ async function drawRetirementAssetChart(propagate = false) {
})
pensionChartInstance = shallowRef(chartInstance)
}
const errorMssage = throttle(() => {
ElMessage.warning('退休,晚節不保!')
}, 4000)
function calculateLaborPensionLumpSum(fv = 0) {
retirement.value.pension.lumpSum = Number(fv)
const { futureSeniority } = retirement.value.insurance
Expand All @@ -664,7 +661,7 @@ function calculateLaborPensionLumpSum(fv = 0) {
}
const debounceId = ref()
function debounce(func, delay = 100) {
function customDebounce(func, delay = 100) {
return (immediate) => {
clearTimeout(debounceId.value)
if (immediate) {
Expand Down

0 comments on commit 17c03b4

Please sign in to comment.