时间戳

首页 > 解决方案 > 满足条件时如何立即显示警报？

javascript - 满足条件时如何立即显示警报？

问题描述

我正在尝试在购物车中的总价格超过 100 美元时发出警报。

我使用了一个简单的 if 语句，当满足条件时，显示警报。下面是我在 HTML 中的代码（我正在修改 Shopify 的主题）。

<script>
  function showAlert() { alert('You triggered an alert!'); }
</script>
{% if cart.total_price > 100 %}
  <script>showAlert();</script>
{% endif%}

这很接近，但不是我想要的。它仅在我刷新页面后显示警报。我希望在购物车达到 100 美元时立即显示警报。所以，当我添加一个产品并且总价值超过 100 美元时，我希望立即显示警报。我该怎么做呢？

标签： javascripthtmlliquid

解决方案

浏览器以前支持的一种方法现在已弃用 Object.watch 可用于实现您的要求，但您可以使用以下多边形填充。

  if (!Object.prototype.watch) {
        Object.defineProperty(Object.prototype, "watch", {
          enumerable: false
          , configurable: true
          , writable: false
          , value: function (prop, handler) {
            var
              oldval = this[prop]
              , newval = oldval
              , getter = function () {
                return newval;
              }
              , setter = function (val) {
                oldval = newval;
                return newval = handler.call(this, prop, oldval, val);
              }
            ;

            if (delete this[prop]) { // can't watch constants
              Object.defineProperty(this, prop, {
                get: getter
                , set: setter
                , enumerable: true
                , configurable: true
              });
            }
          }
        });
      }

    var cart = {price: 40}
    cart.watch('price', (name, prev, current) => {
	if(current > 100) {
		alert(`your price is ${current} dollars which is greater than 100`);
	}
    })
    cart.price = 140

推荐阅读