Skip to content

Commit aa3ba64

Browse files
dangvanthanhdangvanthanh
committed
Use clearInterval in beforeDesotry hook to clear intervals
1 parent 33ca23d commit aa3ba64

File tree

4 files changed

+38
-26
lines changed

4 files changed

+38
-26
lines changed

‎dist/vue-clock.cjs.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,17 @@ function getZeroPad(n) {
1313
var script = {
1414
data: function data() {
1515
return {
16-
hours: '',
17-
minutes: '',
18-
seconds: '',
16+
hours: 0,
17+
minutes: 0,
18+
seconds: 0,
1919
hourtime: ''
2020
};
2121
},
2222
mounted: function mounted() {
23-
setInterval(this.updateDateTime, 1000);
23+
this.$options.interval = setInterval(this.updateDateTime, 1000);
24+
},
25+
beforeDestroy: function beforeDestroy() {
26+
clearInterval(this.$options.interval);
2427
},
2528
methods: {
2629
updateDateTime: function updateDateTime() {
@@ -45,7 +48,7 @@ var __vue_render__ = function __vue_render__() {
4548

4649
var _c = _vm._self._c || _h;
4750

48-
return _c("div", {
51+
return _vm.hourtime != "" ? _c("div", {
4952
staticClass: "clock"
5053
}, [_c("div", {
5154
staticClass: "clock__hours"
@@ -68,7 +71,7 @@ var __vue_render__ = function __vue_render__() {
6871
domProps: {
6972
textContent: _vm._s(_vm.seconds)
7073
}
71-
})]);
74+
})]) : _vm._e();
7275
};
7376

7477
var __vue_staticRenderFns__ = [];
@@ -83,7 +86,7 @@ var __vue_template__ = typeof __vue_render__ !== 'undefined' ? {
8386

8487
var __vue_inject_styles__ = function (inject) {
8588
if (!inject) return;
86-
inject("data-v-3b693988_0", {
89+
inject("data-v-43325e28_0", {
8790
source: "\n.clock {\n background: #fff;\n border: .3rem solid #fff;\n border-radius: .5rem;\n display: inline-block;\n margin-bottom: 1em;\n}\n.clock__hours,\n.clock__minutes,\n.clock__seconds {\n background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);\n display: inline-block;\n color: #fff;\n font-family: 'Nunito', sans-serif;\n font-size: 3rem;\n font-weight: 300;\n padding: .5rem 1rem;\n text-align: center;\n position: relative;\n}\n.clock__hours {\n border-right: .15rem solid #fff;\n border-radius: .5rem 0 0 .5rem;\n}\n.clock__minutes {\n border-right: .15rem solid #fff;\n}\n.clock__seconds {\n border-radius: 0 .5rem .5rem 0;\n}\n.clock__hourtime {\n font-size: 1rem;\n position: absolute;\n top: 2px;\n left: 8px;\n}\n",
8891
map: undefined,
8992
media: undefined

‎dist/vue-clock.es.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,17 @@ function getZeroPad(n) {
99
var script = {
1010
data: function data() {
1111
return {
12-
hours: '',
13-
minutes: '',
14-
seconds: '',
12+
hours: 0,
13+
minutes: 0,
14+
seconds: 0,
1515
hourtime: ''
1616
};
1717
},
1818
mounted: function mounted() {
19-
setInterval(this.updateDateTime, 1000);
19+
this.$options.interval = setInterval(this.updateDateTime, 1000);
20+
},
21+
beforeDestroy: function beforeDestroy() {
22+
clearInterval(this.$options.interval);
2023
},
2124
methods: {
2225
updateDateTime: function updateDateTime() {
@@ -41,7 +44,7 @@ var __vue_render__ = function __vue_render__() {
4144

4245
var _c = _vm._self._c || _h;
4346

44-
return _c("div", {
47+
return _vm.hourtime != "" ? _c("div", {
4548
staticClass: "clock"
4649
}, [_c("div", {
4750
staticClass: "clock__hours"
@@ -64,7 +67,7 @@ var __vue_render__ = function __vue_render__() {
6467
domProps: {
6568
textContent: _vm._s(_vm.seconds)
6669
}
67-
})]);
70+
})]) : _vm._e();
6871
};
6972

7073
var __vue_staticRenderFns__ = [];
@@ -79,7 +82,7 @@ var __vue_template__ = typeof __vue_render__ !== 'undefined' ? {
7982

8083
var __vue_inject_styles__ = function (inject) {
8184
if (!inject) return;
82-
inject("data-v-3b693988_0", {
85+
inject("data-v-43325e28_0", {
8386
source: "\n.clock {\n background: #fff;\n border: .3rem solid #fff;\n border-radius: .5rem;\n display: inline-block;\n margin-bottom: 1em;\n}\n.clock__hours,\n.clock__minutes,\n.clock__seconds {\n background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);\n display: inline-block;\n color: #fff;\n font-family: 'Nunito', sans-serif;\n font-size: 3rem;\n font-weight: 300;\n padding: .5rem 1rem;\n text-align: center;\n position: relative;\n}\n.clock__hours {\n border-right: .15rem solid #fff;\n border-radius: .5rem 0 0 .5rem;\n}\n.clock__minutes {\n border-right: .15rem solid #fff;\n}\n.clock__seconds {\n border-radius: 0 .5rem .5rem 0;\n}\n.clock__hourtime {\n font-size: 1rem;\n position: absolute;\n top: 2px;\n left: 8px;\n}\n",
8487
map: undefined,
8588
media: undefined

‎dist/vue-clock.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,17 @@
1515
var script = {
1616
data: function data() {
1717
return {
18-
hours: '',
19-
minutes: '',
20-
seconds: '',
18+
hours: 0,
19+
minutes: 0,
20+
seconds: 0,
2121
hourtime: ''
2222
};
2323
},
2424
mounted: function mounted() {
25-
setInterval(this.updateDateTime, 1000);
25+
this.$options.interval = setInterval(this.updateDateTime, 1000);
26+
},
27+
beforeDestroy: function beforeDestroy() {
28+
clearInterval(this.$options.interval);
2629
},
2730
methods: {
2831
updateDateTime: function updateDateTime() {
@@ -47,7 +50,7 @@
4750

4851
var _c = _vm._self._c || _h;
4952

50-
return _c("div", {
53+
return _vm.hourtime != "" ? _c("div", {
5154
staticClass: "clock"
5255
}, [_c("div", {
5356
staticClass: "clock__hours"
@@ -70,7 +73,7 @@
7073
domProps: {
7174
textContent: _vm._s(_vm.seconds)
7275
}
73-
})]);
76+
})]) : _vm._e();
7477
};
7578

7679
var __vue_staticRenderFns__ = [];
@@ -85,7 +88,7 @@
8588

8689
var __vue_inject_styles__ = function (inject) {
8790
if (!inject) return;
88-
inject("data-v-3b693988_0", {
91+
inject("data-v-43325e28_0", {
8992
source: "\n.clock {\n background: #fff;\n border: .3rem solid #fff;\n border-radius: .5rem;\n display: inline-block;\n margin-bottom: 1em;\n}\n.clock__hours,\n.clock__minutes,\n.clock__seconds {\n background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);\n display: inline-block;\n color: #fff;\n font-family: 'Nunito', sans-serif;\n font-size: 3rem;\n font-weight: 300;\n padding: .5rem 1rem;\n text-align: center;\n position: relative;\n}\n.clock__hours {\n border-right: .15rem solid #fff;\n border-radius: .5rem 0 0 .5rem;\n}\n.clock__minutes {\n border-right: .15rem solid #fff;\n}\n.clock__seconds {\n border-radius: 0 .5rem .5rem 0;\n}\n.clock__hourtime {\n font-size: 1rem;\n position: absolute;\n top: 2px;\n left: 8px;\n}\n",
9093
map: undefined,
9194
media: undefined

‎src/VueClock.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="clock">
2+
<div class="clock" v-if="hourtime != ''">
33
<div class="clock__hours">
44
<span class="clock__hourtime" v-text="hourtime"></span>
55
<span v-text="hours"></span>
@@ -15,14 +15,17 @@ import { getHourTime, getZeroPad } from './Filters'
1515
export default {
1616
data () {
1717
return {
18-
hours: '',
19-
minutes: '',
20-
seconds: '',
18+
hours: 0,
19+
minutes: 0,
20+
seconds: 0,
2121
hourtime: ''
2222
}
2323
},
2424
mounted () {
25-
setInterval(this.updateDateTime, 1000)
25+
this.$options.interval = setInterval(this.updateDateTime, 1000);
26+
},
27+
beforeDestroy () {
28+
clearInterval(this.$options.interval);
2629
},
2730
methods: {
2831
updateDateTime () {

0 commit comments

Comments
 (0)